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

feat:增加抽屉样式

Browse Source
This commit is contained in:
李晓鸽
2022-10-11 10:59:04 +08:00
parent e26fdbd49a
commit 6fea7a649a
5 changed files with 1512 additions and 1323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -76,6 +76,8 @@ export default defineComponent({
// flex-shrink: 0; // flex-shrink: 0;
display: flex; display: flex;
overflow-y: scroll; overflow-y: scroll;
// display: flex;
// flex: 1 1 auto;
width: calc(100% - 40px); width: calc(100% - 40px);
// margin-bottom: 20px; // margin-bottom: 20px;
margin: 0px 20px 20px 20px; margin: 0px 20px 20px 20px;

24
src/assets/scss/common.scss
View File

@@ -191,4 +191,26 @@ display: none;
.tabledropdown { .tabledropdown {
width: 100px !important; width: 100px !important;
} }
//表格下拉框------------------------------------------- //表格下拉框-------------------------------------------
//抽屉--------------------------------------------------------
.drawerStyle {
.ant-drawer-content-wrapper {
max-width: 1050px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.drawerMain {
min-width: 700px;
margin: 0px 32px 0px 32px;
overflow-x: scroll;
display: flex;
flex-direction: column;
}}
//抽屉--------------------------------------------------------

2502
src/views/courselibrary/CoursewareManage.vue
View File

File diff suppressed because it is too large Load Diff

10
src/views/learningpath/LevelAdd.vue
View File

@@ -61,7 +61,6 @@
<div class="search"></div> <div class="search"></div>
<div class="btnText">重置</div> <div class="btnText">重置</div>
</div> </div>
<router-link to="/leveladddetail"> <router-link to="/leveladddetail">
<div class="btn btn3" @click="handleOut"> <div class="btn btn3" @click="handleOut">
<div class="search"></div> <div class="search"></div>
@@ -173,7 +172,6 @@
><span style="color: #4ea6ff">1</span><span>关-第</span ><span style="color: #4ea6ff">1</span><span>关-第</span
><span style="color: #4ea6ff">4</span><span>关内容</span> ><span style="color: #4ea6ff">4</span><span>关内容</span>
</div> </div>
<br /> <br />
</div> </div>
</div> </div>
@@ -259,7 +257,6 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { ref, reactive, toRefs } from "vue"; import { ref, reactive, toRefs } from "vue";
export default { export default {
@@ -354,7 +351,6 @@ export default {
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
@@ -437,11 +433,9 @@ export default {
margin-top: 5px; margin-top: 5px;
margin-right: 60px; margin-right: 60px;
} }
.more { .more {
position: relative; position: relative;
margin-right: 30px; margin-right: 30px;
.moreArrow { .moreArrow {
width: 13px; width: 13px;
height: 7px; height: 7px;
@@ -491,12 +485,10 @@ export default {
.pub { .pub {
margin-right: 10px; margin-right: 10px;
} }
.more { .more {
margin-right: 10px; margin-right: 10px;
} }
} }
.more:hover .moreArrow { .more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png"); background-image: url("../../assets/images/navtop/up.png");
} }
@@ -505,7 +497,6 @@ export default {
} }
} }
} }
.split { .split {
width: 100%; width: 100%;
height: 20px; height: 20px;
@@ -753,7 +744,6 @@ export default {
.onemain { .onemain {
margin-top: 20px; margin-top: 20px;
margin-left: 55px; margin-left: 55px;
color: #6f6f6f; color: #6f6f6f;
font-size: 14px; font-size: 14px;
.checkcon { .checkcon {

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

@@ -25,7 +25,7 @@
v-model:visible="visible" v-model:visible="visible"
class="drawerStyle" class="drawerStyle"
style="color: red" style="color: red"
width="70%" width="80%"
title="添加投票" title="添加投票"
placement="right" placement="right"
@after-visible-change="afterVisibleChange" @after-visible-change="afterVisibleChange"
@@ -39,70 +39,147 @@
@click="closeDrawer" @click="closeDrawer"
/> />
</div> </div>
<!-- 投票名称 --> <div class="contentMain">
<div class="vote"> <!-- 投票名称 -->
<div class="votebox"> <div class="vote">
<img <div class="votebox">
class="voteimg" <img
src="../../assets/images/basicinfo/asterisk.png" class="voteimg"
/> src="../../assets/images/basicinfo/asterisk.png"
<div class="votename">投票名称：</div> />
<div class="votename">投票名称：</div>
</div>
<div style="width: 424px">
<a-input v-model:value="value" placeholder="请输入投票名称" />
</div>
</div> </div>
<div style="width: 424px"> <!-- 投票名称 -->
<a-input v-model:value="value" placeholder="请输入投票名称" /> <!-- 创建投票 -->
<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>
<!-- 创建投票 -->
<!-- 起止时间 -->
<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>
<!-- 投票名称 -->
<!-- 创建投票 -->
<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> </div>
</a-drawer> </a-drawer>
</div> </div>
@@ -142,21 +219,7 @@ export default {
width: 100%; width: 100%;
} }
.drawerStyle { .drawerStyle {
.ant-drawer-content-wrapper {
max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.drawerMain { .drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
overflow-x: scroll;
display: flex;
flex-direction: column;
.header { .header {
height: 73px; height: 73px;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
@@ -171,53 +234,55 @@ export default {
margin-left: 24px; margin-left: 24px;
} }
} }
.vote { .contentMain {
display: flex; .vote {
align-items: center;
margin-top: 32px;
margin-left: 20px;
.votebox {
width: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; margin-top: 32px;
// background-color: pink; margin-left: 20px;
.voteimg { .votebox {
width: 10px; width: 100px;
height: 10px; display: flex;
margin-right: 5px; 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;
}
} }
.votename {
.votebtn {
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #333333; color: #ffffff;
line-height: 20px; line-height: 20px;
} }
} .voteclassify {
font-size: 14px;
.votebtn { font-weight: 400;
width: 130px; color: #999999;
height: 40px; line-height: 20px;
background: #388be1; margin-top: 16px;
border-radius: 8px; }
display: flex; .ant-picker {
align-items: center; width: 424px;
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;
} }
} }
} }