hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-09 19:06:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

style:抽屉单独写在vue文件里

Browse Source
This commit is contained in:
李晓鸽
2022-10-14 09:18:11 +08:00
parent 9fb92c878b
commit b3f6941cc0
2 changed files with 261 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
src/components/drawers/AddVote.vue Normal file
View File

@@ -0,0 +1,246 @@
<template>
<a-drawer
:visible="addvoteVisible"
class="drawerStyle"
style="color: red"
width="80%"
title="添加投票"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">添加投票</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<!-- 投票名称 -->
<div class="vote">
<div class="votebox">
<img
class="voteimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="votename">投票名称：</div>
</div>
<div style="width: 424px">
<a-input v-model:value="value" placeholder="请输入投票名称" />
</div>
</div>
<!-- 投票名称 -->
<!-- 创建投票 -->
<div class="vote">
<div class="votebox">
<img
class="voteimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="votename">创建投票：</div>
</div>
<div class="votebtn">创建投票</div>
</div>
<!-- 创建投票 -->
<!-- 起止时间 -->
<div class="vote">
<div class="votebox">
<div class="voteimg"></div>
<div class="votename">起止时间：</div>
</div>
<div class="votedate">
<a-range-picker />
</div>
</div>
<!-- 起止时间 -->
<!-- 基础投票数 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">基础投票数：</div>
</div>
<div>
<div class="votebtn">点击上传</div>
<div class="voteclassify">支持：xls.xlsx</div>
</div>
</div>
<!-- 基础投票数 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea :rows="4" placeholder="请输入投票说明" :maxlength="6" />
</div>
</div>
<!-- 投票说明 -->
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
name: "AddVote",
props: {
addvoteVisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({});
const closeDrawer = () => {
ctx.emit("update:addvoteVisible", false);
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
const showDrawer = () => {
state.visible = true;
};
return {
...toRefs(state),
afterVisibleChange,
showDrawer,
closeDrawer,
// change,
};
},
};
</script>
<style lang="scss">
.addvote {
}
.drawerStyle {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
.vote {
display: flex;
align-items: center;
margin-top: 32px;
margin-left: 20px;
.votebox {
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
// background-color: pink;
.voteimg {
width: 10px;
height: 10px;
margin-right: 5px;
}
.votename {
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 20px;
}
}
.votebtn {
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
.voteclassify {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 20px;
margin-top: 16px;
}
.ant-picker {
width: 424px;
}
}
}
}
}
</style>

187
src/views/system/SystemManage.vue
View File

@@ -21,195 +21,30 @@
添加投票 添加投票
</div> </div>
<div> <div>
<a-drawer <add-vote v-model:addvoteVisible="visible" />
v-model:visible="visible"
class="drawerStyle"
style="color: red"
width="80%"
title="添加投票"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">添加投票</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<!-- 投票名称 -->
<div class="vote">
<div class="votebox">
<img
class="voteimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="votename">投票名称：</div>
</div>
<div style="width: 424px">
<a-input v-model:value="value" placeholder="请输入投票名称" />
</div>
</div>
<!-- 投票名称 -->
<!-- 创建投票 -->
<div class="vote">
<div class="votebox">
<img
class="voteimg"
src="../../assets/images/basicinfo/asterisk.png"
/>
<div class="votename">创建投票：</div>
</div>
<div class="votebtn">创建投票</div>
</div>
<!-- 创建投票 -->
<!-- 起止时间 -->
<div class="vote">
<div class="votebox">
<div class="voteimg"></div>
<div class="votename">起止时间：</div>
</div>
<div class="votedate">
<a-range-picker />
</div>
</div>
<!-- 起止时间 -->
<!-- 基础投票数 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">基础投票数：</div>
</div>
<div>
<div class="votebtn">点击上传</div>
<div class="voteclassify">支持：xls.xlsx</div>
</div>
</div>
<!-- 基础投票数 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea
:rows="4"
placeholder="请输入投票说明"
:maxlength="6"
/>
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea
:rows="4"
placeholder="请输入投票说明"
:maxlength="6"
/>
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea
:rows="4"
placeholder="请输入投票说明"
:maxlength="6"
/>
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea
:rows="4"
placeholder="请输入投票说明"
:maxlength="6"
/>
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea
:rows="4"
placeholder="请输入投票说明"
:maxlength="6"
/>
</div>
</div>
<!-- 投票说明 -->
<!-- 投票说明 -->
<div class="vote" style="align-items: flex-start">
<div class="votebox" style="margin-top: 10px">
<div class="voteimg"></div>
<div class="votename">投票说明：</div>
</div>
<div style="width: 500px">
<a-textarea
:rows="4"
placeholder="请输入投票说明"
:maxlength="6"
/>
</div>
</div>
<!-- 投票说明 -->
</div>
</div>
</a-drawer>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { reactive, toRefs } from "vue"; import { reactive, toRefs } from "vue";
import AddVote from "../../components/drawers/AddVote";
export default { export default {
name: "SystemManage", name: "SystemManage",
components: {
AddVote,
},
setup() { setup() {
const state = reactive({ const state = reactive({
visible: true, visible: false,
}); });
const afterVisibleChange = (bool) => {
console.log("visible", bool);
};
const showDrawer = () => { const showDrawer = () => {
state.visible = true; state.visible = true;
}; };
const closeDrawer = () => {
state.visible = false;
};
return { return {
...toRefs(state), ...toRefs(state),
afterVisibleChange,
showDrawer, showDrawer,
closeDrawer,
}; };
}, },
}; };
@@ -217,6 +52,14 @@ export default {
<style lang="scss"> <style lang="scss">
.systemManage { .systemManage {
width: 100%; width: 100%;
.ant-input-textarea-show-count {
position: relative;
}
.ant-input-textarea-show-count::after {
position: absolute;
right: 0px;
bottom: 0px;
}
} }
.drawerStyle { .drawerStyle {
.drawerMain { .drawerMain {