上传组件统一样式

This commit is contained in:
zhangyc
2023-01-03 13:29:12 +08:00
parent dceca9082f
commit 772c5e19e5
5 changed files with 138 additions and 214 deletions

View File

@@ -3,13 +3,13 @@
<div> <div>
<Upload v-model:value="files" ref="uploadRef" :file-type="fileType"> <Upload v-model:value="files" ref="uploadRef" :file-type="fileType">
<div class="accessory" style="cursor: pointer"> <div class="accessory" style="cursor: pointer">
<button v-if="againUpload" class="xkbtn" type="button">上传附件</button> <span class="fujian">附件</span><button v-if="againUpload" class="xkbtn" type="button">上传附件</button>
<button v-else class="xkbtn" type="button" @click="notClick">附件上传中</button> <button v-else class="xkbtn" type="button" @click="notClick">附件上传中</button>
</div> </div>
</Upload> </Upload>
<div class ="tips" style="color: rgb(153, 155, 163);">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div> <div class ="tips" style="color: rgb(153, 155, 163);">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
</div> </div>
<div class="mbl_items12" style="margin-left: 0"> <div class="mbl_items12" >
<div <div
class="i12_box1" class="i12_box1"
v-for="(item, index) in files" v-for="(item, index) in files"
@@ -124,9 +124,11 @@ function notClick(event) {
</script> </script>
<style lang="scss"> <style lang="scss">
.mbl_items12 { .mbl_items12 {
width: 440px; width: 440px;
margin-left: 100px; margin-top: 20px;
margin-right: 13px;
.i12_box1 { .i12_box1 {
display: flex; display: flex;

View File

@@ -1142,17 +1142,18 @@ export default {
top: 10px; top: 10px;
} }
.accessory{ .accessory{
margin-left: 92px; margin-left: 54px;
} }
} }
} }
.tips{ .tips{
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 10px;
} }
.mbl_items12{ .mbl_items12{
width: 373px; width: 373px;
margin-left: 10px; margin-left:-13px;
} }
} }
} }

View File

@@ -570,7 +570,7 @@ export default {
.item_inp { .item_inp {
flex: 1; flex: 1;
position: relative; position: relative;
margin-left: 19px; margin-left: -25px;
.inp_num { .inp_num {
position: absolute; position: absolute;
left: 398px; left: 398px;

View File

@@ -1490,6 +1490,8 @@
/> />
</div> </div>
</div> </div>
<div class="cstm_items"> <div class="cstm_items">
<div class="signbox"> <div class="signbox">
<div class="sign"> <div class="sign">
@@ -1507,6 +1509,9 @@
></ProjectManager> ></ProjectManager>
</div> </div>
</div> </div>
<div class="cstm_items"> <div class="cstm_items">
<div class="signbox"> <div class="signbox">
<span style="margin-right: 3px">报名设置</span> <span style="margin-right: 3px">报名设置</span>
@@ -6029,9 +6034,16 @@ export default defineComponent({
} }
} }
.items_fj {
margin-bottom: 1px;
.fujian{
display: none;
}
.mbl_items12 { .mbl_items12 {
width: 440px; width: 440px;
margin-left: 100px; margin-right:56px;
.i12_box1 { .i12_box1 {
display: flex; display: flex;
@@ -6129,9 +6141,6 @@ export default defineComponent({
} }
} }
} }
.items_fj {
margin-bottom: 1px;
} }
.items_btn { .items_btn {
@@ -6981,106 +6990,7 @@ export default defineComponent({
} }
} }
.mbl_items12 {
width: 440px;
margin-left: 100px;
.i12_box1 {
display: flex;
align-items: center;
padding: 17px 0px 17px 21px;
border: 1px solid #eff4fc;
border-radius: 8px;
margin-bottom: 10px;
.file_img {
width: 27px;
height: 32px;
background-image: url(@/assets/images/coursewareManage/imgs.png);
margin-right: 22px;
img {
width: 100%;
height: 100%;
}
}
.file_detail {
width: 250px;
margin-right: 21px;
.file_updata {
display: flex;
align-items: center;
.updatabox {
position: relative;
width: 230px;
height: 5px;
background-color: rgba(192, 192, 192, 0.25);
border-radius: 3px;
.updatacolor {
position: absolute;
left: 0;
width: 100%;
height: 5px;
background-color: #57c887;
border-radius: 3px;
}
.updatacolor2 {
position: absolute;
left: 0;
width: 80%;
height: 5px;
background-color: #ff7474;
border-radius: 3px;
}
.updatacolor3 {
position: absolute;
left: 0;
width: 60%;
height: 5px;
background-color: #4ea6ff;
border-radius: 3px;
}
.updataxq {
position: absolute;
right: 2px;
top: -30px;
color: #57c887;
}
.updataxq2 {
position: absolute;
right: 2px;
top: -30px;
color: #ff7474;
}
.updataxq3 {
position: absolute;
right: 2px;
top: -30px;
color: #4ea6ff;
}
}
}
}
.file_operation {
display: flex;
.fobox {
margin-right: 5px;
cursor: pointer;
}
}
}
}
} }
} }

View File

@@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<div class="mbl_items2"> <div class="mbl_items2">
<div class="item_nam"> <div class="item_nam" style="margin-top: 8px;">
<div class="asterisk_icon"> <div class="asterisk_icon">
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" /> <img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
</div> </div>
@@ -235,13 +235,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mb_right"> <div class="mb_right">
<!--
<div class="mbl_items"> <div class="mbl_items">
<div class="item_nam" style="margin-top:5px;"> <div class="item_nam" style="margin-top:5px;">
<div class="asterisk_icon"> <div class="asterisk_icon">
<img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" /> <img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" />
</div> </div>
<!-- 授课教师1 -->
<span style="margin-right: 14px">授课教师</span> <span style="margin-right: 14px">授课教师</span>
</div> </div>
<div class="item_inp"> <div class="item_inp">
@@ -250,8 +254,10 @@
</div> </div>
</div> </div>
</div> </div>
-->
<div class="mbl_items2"> <div class="mbl_items2">
<div class="item_nam"> <div class="item_nam" style="margin-top: 8px;">
<div class="asterisk_icon"> <div class="asterisk_icon">
<img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" /> <img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" />
</div> </div>
@@ -270,7 +276,7 @@
</div> </div>
</div> </div>
<div class="mbl_items"> <div class="mbl_items">
<div class="item_nam"> <div class="item_nam" style="margin-top: 8px;">
<span style="margin-right: 10px">附件</span> <span style="margin-right: 10px">附件</span>
</div> </div>
<div class="item_inp"> <div class="item_inp">
@@ -278,6 +284,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="m_footer"> <div class="m_footer">
<div class="fotnam"> <div class="fotnam">
@@ -328,7 +336,7 @@ import { fileUp } from "../../api/indexEval";
import * as api1 from "../../api/index1"; import * as api1 from "../../api/index1";
import "@wangeditor/editor/dist/css/style.css"; import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import ProjectManager from "@/components/project/ProjectManagerNew"; //import ProjectManager from "@/components/project/ProjectManagerNew";
import NameInput from "@/components/project/NameInput"; import NameInput from "@/components/project/NameInput";
import FJUpload from "@/components/common/FJUpload"; import FJUpload from "@/components/common/FJUpload";
import * as moment from "moment"; import * as moment from "moment";
@@ -340,7 +348,7 @@ export default defineComponent({
Toolbar, Toolbar,
FJUpload, FJUpload,
NameInput, NameInput,
ProjectManager, //ProjectManager,
}, },
props: { props: {
xzinputV1: { xzinputV1: {
@@ -1179,12 +1187,15 @@ export default defineComponent({
left: 395px; left: 395px;
bottom: 10px; bottom: 10px;
} }
}
}
}
}
.fujian{
display: none;
}
.mbl_items12 { .mbl_items12 {
width: 440px; width: 440px;
margin-left: 100px; margin-right:56px;
.i12_box1 { .i12_box1 {
display: flex; display: flex;