静态样式完成
|
After Width: | Height: | Size: 565 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 847 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 939 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 643 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 684 B |
|
After Width: | Height: | Size: 1017 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 314 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 679 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 240 KiB |
|
After Width: | Height: | Size: 758 B |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 200 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 272 KiB |
|
After Width: | Height: | Size: 213 KiB |
|
After Width: | Height: | Size: 222 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 52 KiB |
@ -0,0 +1,88 @@
|
||||
|
||||
<template>
|
||||
<div style="background-color: #f8f8f8;padding-bottom: 248px;">
|
||||
<div class="container ">
|
||||
<el-button type="text" link @click="$router.go(-1);" class="btnReturn ">
|
||||
<div class="flx-center">
|
||||
<img style="width: 18px;height: 18px;margin-right: 5px;" src="@/assets/icons/returnOrder.png" alt=""/>
|
||||
<span style="color: black;font-size: 18px;line-height: 18px;">返回</span>
|
||||
</div>
|
||||
</el-button>
|
||||
<el-row >
|
||||
<el-col :span="12" v-for="(item,index) in inviteList" :key="index" >
|
||||
<div
|
||||
class="flx-wrap"
|
||||
:class="['inviteListBox', { 'invite-active': inviteIndex === index }]"
|
||||
@click="setInviteActive(item,index)"
|
||||
>
|
||||
<div class="flx-justify-between">
|
||||
<span>{{ item.title }}</span>
|
||||
<span ><img style="padding-bottom: 5px;" src="@/assets/icons/about/invite/address.png" alt=""> {{ item.address }}</span>
|
||||
</div>
|
||||
<div>{{ item.content }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"inviteList",
|
||||
components: {
|
||||
|
||||
// Switcher
|
||||
},
|
||||
created() {
|
||||
console.log(this.$route.query.id)
|
||||
this.inviteData =JSON.parse( localStorage.getItem("inviteIndex") );
|
||||
if(this.inviteData) {
|
||||
this.inviteIndex = +this.inviteData.listIndex;
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inviteData:{},
|
||||
id:this.$route.query.id,
|
||||
inviteIndex:0,
|
||||
inviteList: [
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
{ id:'1',address:'深圳',content:'大专 | 经验不限',title: '跨境物流销售'},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setInviteActive(item,index) {
|
||||
this.inviteIndex = index
|
||||
localStorage.setItem('inviteIndex',JSON.stringify({...this.inviteData,listIndex:index}));
|
||||
this.$router.push({
|
||||
name: 'inviteListDetail',
|
||||
query:{
|
||||
id:item.id
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style src="../index.css" scoped>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -1,3 +1,16 @@
|
||||
::v-deep .el-icon-arrow-down:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.version-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.version-label {
|
||||
margin-right: 8px; /* 调整间距 */
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
border: none;
|
||||
width: 120px;
|
||||
}
|
||||
@ -1,214 +0,0 @@
|
||||
<template>
|
||||
<div class="flx">
|
||||
|
||||
<el-button type="primary" class="btn "
|
||||
style="border: 1px solid #1A1E31;border-radius: 4px;margin-right: 10px;"
|
||||
v-if="receivedValue === 'buttonOrder'">
|
||||
<div class="btns" style="font-size: 14px;left: 15px;top:5px;color: #fff;" >去下单</div>
|
||||
<input
|
||||
class="selectfile"
|
||||
style="width: 100%;height: 100%;"
|
||||
type="file"
|
||||
ref="fileInput"
|
||||
@change="handleFileChange" />
|
||||
</el-button>
|
||||
<a href="https://public-aaf-shenzhen-file.oss-cn-beijing.aliyuncs.com/aaf1.0/template/AAF-下单系统模板.xls" download>
|
||||
<el-button type="">
|
||||
下载模板
|
||||
</el-button>
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {aliOssUpload} from "@/utils/order/useBackUploadImport.js";
|
||||
export default {
|
||||
components :{
|
||||
|
||||
},
|
||||
props: {
|
||||
receivedValue: String,
|
||||
imgValue: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: null,
|
||||
imageurl: this.imgValue || ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
beforeUpload(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
aliOssUpload(file.name, new Blob([file]))
|
||||
.then(result => {
|
||||
console.log("文件上传成功", result);
|
||||
this.$emit("testFunc", { resultData: result });
|
||||
resolve(result);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("文件上传失败", error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleFileChange(event) {
|
||||
const files = event.target.files;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
console.log("文件信息:", file);
|
||||
this.beforeUpload(file)
|
||||
.then(() => {
|
||||
console.log("Image downloaded successfully!");
|
||||
})
|
||||
.catch(downloadError => {
|
||||
console.error("Download failed:", downloadError);
|
||||
});
|
||||
}
|
||||
// Reset the file input
|
||||
event.target.value = '';
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped >
|
||||
.file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 301px;
|
||||
height: 140px;
|
||||
overflow: hidden; /* Add this line */
|
||||
cursor: pointer;
|
||||
background: #f5f5f5;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.fileAvatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
overflow: hidden; /* Add this line */
|
||||
cursor: pointer;
|
||||
background: #f5f5f5;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.selectfile {
|
||||
position: absolute; /* Change from relative to absolute */
|
||||
top: 0; /* Add this line */
|
||||
left: 0; /* Add this line */
|
||||
width: 301px; /* Add this line */
|
||||
height: 141px; /* Add this line */
|
||||
opacity: 0;
|
||||
}
|
||||
.selectfileAvatar {
|
||||
position: absolute !important; /* Change from relative to absolute */
|
||||
top: 0; /* Add this line */
|
||||
left: 0; /* Add this line */
|
||||
width: 107px; /* Add this line */
|
||||
height: 107px; /* Add this line */
|
||||
opacity: 0;
|
||||
border-radius: 28px;
|
||||
z-index: 1;
|
||||
}
|
||||
.avatar:hover .overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
opacity: 1;
|
||||
border-radius: 28px;
|
||||
}
|
||||
.iconpos {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 72px;
|
||||
}
|
||||
.btn {
|
||||
position: relative;
|
||||
}
|
||||
.blackBG {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
|
||||
}
|
||||
.blackBG .btns {
|
||||
color: #1A1E31;
|
||||
top: 5px;
|
||||
left: 9px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
border-radius: 28px;
|
||||
border:none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar.el-button {
|
||||
border-radius: 28px;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
.avatar.el-button span {
|
||||
display: inline-block;
|
||||
}
|
||||
.avatars {
|
||||
position: absolute;
|
||||
border-radius: 28px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 28px;
|
||||
|
||||
}
|
||||
.uploadImg {
|
||||
width:301px;
|
||||
height:141px;
|
||||
/* background-image: url("@/assets/images/Rectangle.png"); */
|
||||
background-size:120%;
|
||||
background-position: center;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 107px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
border-radius: 28px;
|
||||
|
||||
}
|
||||
.el-button {
|
||||
width: 84px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #1A1E31;
|
||||
background: #fff;
|
||||
color: #1A1E31;
|
||||
padding: 5px;
|
||||
}
|
||||
.el-button:hover {
|
||||
border: 1px solid #1A1E31;
|
||||
background: #fff;
|
||||
color: #1A1E31;
|
||||
}
|
||||
.el-button--primary{
|
||||
background: #1A1E31;
|
||||
color: #fff;
|
||||
}
|
||||
.el-button--primary:hover{
|
||||
transform: none;
|
||||
background: #1A1E31;
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||