上传组件统一样式

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>
<Upload v-model:value="files" ref="uploadRef" :file-type="fileType">
<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>
</div>
</Upload>
<div class ="tips" style="color: rgb(153, 155, 163);">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
</div>
<div class="mbl_items12" style="margin-left: 0">
<div class="mbl_items12" >
<div
class="i12_box1"
v-for="(item, index) in files"
@@ -124,9 +124,11 @@ function notClick(event) {
</script>
<style lang="scss">
.mbl_items12 {
width: 440px;
margin-left: 100px;
margin-top: 20px;
margin-right: 13px;
.i12_box1 {
display: flex;

View File

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

View File

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

View File

@@ -1490,6 +1490,8 @@
/>
</div>
</div>
<div class="cstm_items">
<div class="signbox">
<div class="sign">
@@ -1507,6 +1509,9 @@
></ProjectManager>
</div>
</div>
<div class="cstm_items">
<div class="signbox">
<span style="margin-right: 3px">报名设置</span>
@@ -6029,109 +6034,113 @@ 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;
}
}
}
}
.items_fj {
margin-bottom: 1px;
.fujian{
display: none;
}
.mbl_items12 {
width: 440px;
margin-right:56px;
.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;
}
}
}
}
}
.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 class="mbl_items2">
<div class="item_nam">
<div class="item_nam" style="margin-top: 8px;">
<div class="asterisk_icon">
<img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
</div>
@@ -235,13 +235,17 @@
</div>
</div>
</div>
<div class="mb_right">
<!--
<div class="mbl_items">
<div class="item_nam" style="margin-top:5px;">
<div class="asterisk_icon">
<img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" />
</div>
<!-- 授课教师1 -->
<span style="margin-right: 14px">授课教师</span>
</div>
<div class="item_inp">
@@ -250,8 +254,10 @@
</div>
</div>
</div>
-->
<div class="mbl_items2">
<div class="item_nam">
<div class="item_nam" style="margin-top: 8px;">
<div class="asterisk_icon">
<img src="@/assets/images/coursewareManage/asterisk.png" alt="asterisk" />
</div>
@@ -270,7 +276,7 @@
</div>
</div>
<div class="mbl_items">
<div class="item_nam">
<div class="item_nam" style="margin-top: 8px;">
<span style="margin-right: 10px">附件</span>
</div>
<div class="item_inp">
@@ -278,6 +284,8 @@
</div>
</div>
</div>
</div>
<div class="m_footer">
<div class="fotnam">
@@ -328,7 +336,7 @@ import { fileUp } from "../../api/indexEval";
import * as api1 from "../../api/index1";
import "@wangeditor/editor/dist/css/style.css";
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 FJUpload from "@/components/common/FJUpload";
import * as moment from "moment";
@@ -340,7 +348,7 @@ export default defineComponent({
Toolbar,
FJUpload,
NameInput,
ProjectManager,
//ProjectManager,
},
props: {
xzinputV1: {
@@ -1028,7 +1036,7 @@ export default defineComponent({
}
}
}
.mbl_items2 {
display: flex;
align-items: start;
@@ -1179,12 +1187,15 @@ export default defineComponent({
left: 395px;
bottom: 10px;
}
}
}
.fujian{
display: none;
}
.mbl_items12 {
width: 440px;
margin-left: 100px;
margin-right:56px;
.i12_box1 {
display: flex;