first commit
This commit is contained in:
LiaoFJ
158
src/views/Demo.vue
Normal file
158
src/views/Demo.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="move_page">
|
||||
<div class="move_click">
|
||||
<div class="move_click_dian" v-for="i in moveDian" :key="i" :style="{'background':i}" @mousedown="AddDian(i)"></div>
|
||||
</div>
|
||||
<div class="img_block" ref="imgbox" @mousemove="startMove($event)">
|
||||
<img ref="img" src="https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF" />
|
||||
<!-- <div class="img_mark"></div> -->
|
||||
<div class="img_click_dian" v-for="item in imgDian" :key="item" :style="{'background':item.color,left:item.left+'px', top:item.top+'px'}" @mousedown="getMouseDown($event,item)" @mousemove="startMove($event)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent,h,ref} from "vue";
|
||||
export default defineComponent({
|
||||
data(){
|
||||
return{
|
||||
moveDian:['red','yellow'],
|
||||
imgDian:[],
|
||||
intObj:null,
|
||||
startDian:false,
|
||||
currentSign:{},
|
||||
imgBox:{},
|
||||
moveOriginal:{posX: 0, posY: 0}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.imgBox = {
|
||||
left : this.$refs.imgbox.offsetLeft,
|
||||
top:this.$refs.imgbox.offsetTop,
|
||||
scrollTop:this.$refs.scrollTop || 0,
|
||||
}
|
||||
|
||||
console.log(this.imgBox)
|
||||
},
|
||||
methods:{
|
||||
AddDian(color){
|
||||
this.startDian = true
|
||||
this.intObj = {
|
||||
color:color
|
||||
}
|
||||
console.log(this.intObj)
|
||||
},
|
||||
|
||||
startMove(event){
|
||||
let scrollTop = this.$refs.imgbox.scrollTop;
|
||||
if(this.intObj){
|
||||
this.currentSign.color = this.intObj.color
|
||||
this.currentSign.left = event.clientX - this.imgBox.left
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
|
||||
this.imgDian.push(this.currentSign)
|
||||
console.log(this.currentSign)
|
||||
this.intObj = null
|
||||
}else{
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
|
||||
document.addEventListener('mouseup', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 在边界上的签名域处理
|
||||
setBoundarySign() {
|
||||
let height = this.$refs.imgbox.offsetHeight + this.$refs.imgbox.scrollTop;
|
||||
// 2 为签名域的边框
|
||||
let maxPosHeight = height - 30
|
||||
// console.log(height,maxPosHeight,this.currentSign.pos_params.height)
|
||||
let maxPosWidth = this.$refs.imgbox.clientWidth - 30 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top <= 0) {
|
||||
this.currentSign.top = 0
|
||||
} else if (this.currentSign.top >= maxPosHeight ) {
|
||||
this.currentSign.top = maxPosHeight;
|
||||
}
|
||||
if (this.currentSign.left <= 0) {
|
||||
this.currentSign.left = 0
|
||||
} else if (this.currentSign.left >= maxPosWidth) {
|
||||
this.currentSign.left = maxPosWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getMouseDown(event,item){
|
||||
this.currentSign = item
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
this.moveOriginal.posX = event.offsetX
|
||||
// this.moveOriginal.posY = mousedownParam.event.clientY - this.currentSign.pos_params.top - this.signBox.boxTop;
|
||||
this.moveOriginal.posY = event.offsetY // 1为边框
|
||||
this.startDian = true
|
||||
},
|
||||
|
||||
getMouseOver(){
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('mouseup', this.getMouseOver);
|
||||
document.removeEventListener('touchend', this.getMouseOver);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.move_page{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.move_click{
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.move_click_dian{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 60px;
|
||||
cursor: pointer;
|
||||
user-select:none; /* CSS3属性 */
|
||||
}
|
||||
.img_block{
|
||||
position: relative;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
overflow-y: auto;
|
||||
background: green;
|
||||
}
|
||||
.img_mark{
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
background: #ccc;
|
||||
/* width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; */
|
||||
}
|
||||
img{
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
width: 700px;
|
||||
}
|
||||
.img_click_dian{
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
410
src/views/HistoryPage.vue
Normal file
410
src/views/HistoryPage.vue
Normal file
@@ -0,0 +1,410 @@
|
||||
<template>
|
||||
<div class="history_page">
|
||||
<div class="page_content">
|
||||
<img
|
||||
class="page_content_bg"
|
||||
src="@/assets/images/homePage/bg.png"
|
||||
/>
|
||||
<div class="page_content_body">
|
||||
<HeaderComponent></HeaderComponent>
|
||||
<div class="history_page_body">
|
||||
<div class="history_header">History</div>
|
||||
<div class="history_table_search">
|
||||
<a-range-picker class="range_picker" v-model:value="rangePickerValue" :placeholder="['Start Date', 'End Date']" valueFormat="YYYY-MM-DD">
|
||||
<template #suffixIcon>
|
||||
<span class="icon iconfont range_picker_icon icon-rili"></span>
|
||||
</template>
|
||||
</a-range-picker>
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Search by collection name" v-model="searchCollectionName" @keydown.enter="searchHistoryList()">
|
||||
<div class="search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="history_table_content" ref="historyTable">
|
||||
<a-table :columns="columns" :data-source="collectionList" :scroll="{ y: historyTableHeight }" @change="changePage"
|
||||
:pagination="{
|
||||
showSizeChanger:true,
|
||||
current: currentPage,
|
||||
pageSize:pageSize,
|
||||
total: total,
|
||||
showQuickJumper:true,
|
||||
bordered:false
|
||||
}">
|
||||
<template v-slot:action="{record, index}" >
|
||||
<div class="operate_list">
|
||||
<div class="operate_item" @click="turnToDetail(record)">Detail</div>
|
||||
<div class="operate_item" @click="renameCollection(record,index)">Rename</div>
|
||||
<div class="operate_item" @click="retrieveHome(record)">Retrieve</div>
|
||||
<div class="operate_item" @click="deleteGroup(record, index)">Delete</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HistoryDetail ref="historyDetail" :groupDetails="groupDetails" :collectionName="collectionName"></HistoryDetail>
|
||||
|
||||
<a-modal class="rename_modal_component"
|
||||
v-model:visible="renameVisivle"
|
||||
:footer="null"
|
||||
:title="renameData?.name"
|
||||
width="56rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<div class="collection_rename_content">
|
||||
<div class="rename_form_content">
|
||||
<input class="rename_form_input" placeholder="Enter a new name" v-model="newCollectionName" @keydown.enter="confrimRename()">
|
||||
</div>
|
||||
<div class="rename_submit_button" @click="confrimRename()">Submit</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,createVNode} from 'vue'
|
||||
import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { formatTime } from "@/tool/util"
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
HeaderComponent,
|
||||
HistoryDetail,
|
||||
},
|
||||
setup() {
|
||||
let rangePickerValue:any = ref([])
|
||||
let renameData:any = ref({}) //修改名字选中的数据
|
||||
const columns:any = ref([
|
||||
{ title: 'Collections Name', align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
|
||||
{ title: 'Uptate Time', align:'center', ellipsis: true,width: 150, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
|
||||
let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
||||
return time
|
||||
}},
|
||||
{ title: 'Sketch Counts', align:'center', ellipsis: true, width: 150, dataIndex: 'sketchCount', key: 'sketchCounts' },
|
||||
{
|
||||
title: 'Operations',
|
||||
key: 'operation',
|
||||
align:'center',
|
||||
fixed: 'right',
|
||||
width: 150,
|
||||
slots:{customRender:'action'}
|
||||
},
|
||||
]);
|
||||
let collectionList:any = ref([])
|
||||
return {
|
||||
rangePickerValue,
|
||||
columns,
|
||||
collectionList,
|
||||
renameData,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
currentPage:1,
|
||||
pageSize:10,
|
||||
total:0,
|
||||
historyTableHeight:0,
|
||||
newCollectionName:'',
|
||||
renameVisivle:false,//修改名字弹窗
|
||||
groupDetails:{},//每个collection的详情
|
||||
collectionName:'',//选中的名字
|
||||
searchCollectionName:'',
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let historyTable:any = this.$refs.historyTable
|
||||
this.historyTableHeight = historyTable.clientHeight - 130
|
||||
this.getHistoryList()
|
||||
},
|
||||
methods:{
|
||||
turnToDetail(record:any){
|
||||
this.groupDetails = record.groupDetails
|
||||
let historyDetail:any = this.$refs.historyDetail
|
||||
this.collectionName = record.name
|
||||
historyDetail.changeDetailShow()
|
||||
},
|
||||
|
||||
|
||||
//改变页码
|
||||
changePage(e:any){
|
||||
this.currentPage = e.current
|
||||
this.pageSize = e.pageSize
|
||||
this.getHistoryList()
|
||||
},
|
||||
|
||||
//查询列表
|
||||
searchHistoryList(){
|
||||
this.currentPage = 1
|
||||
this.getHistoryList()
|
||||
},
|
||||
|
||||
getHistoryList(){
|
||||
let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
|
||||
let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
|
||||
let data = {
|
||||
page:this.currentPage,
|
||||
size:this.pageSize,
|
||||
collectionName:this.searchCollectionName,
|
||||
startDate:startDate,
|
||||
endDate:endDate
|
||||
}
|
||||
Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
||||
(rv: any) => {
|
||||
this.collectionList = rv.content
|
||||
this.total = rv.total
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//删除分组
|
||||
deleteGroup(record:any,index:number){
|
||||
let deleteGroupFun = (id:any,index:number) =>{
|
||||
let data = {
|
||||
userGroupId:id
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
||||
(rv: any) => {
|
||||
message.success('Deleted successfully')
|
||||
this.collectionList.splice(index,1)
|
||||
}
|
||||
);
|
||||
}
|
||||
Modal.confirm({
|
||||
title: 'Do you really want to delete this collection? ',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
onOk() {
|
||||
deleteGroupFun(record.id,index)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//修改名字
|
||||
renameCollection(record:any,index:number){
|
||||
this.renameVisivle = true
|
||||
this.renameData = {
|
||||
...record,
|
||||
index:index
|
||||
}
|
||||
},
|
||||
|
||||
//确定修改名字
|
||||
confrimRename(){
|
||||
let data = {
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
userGroupId: this.renameData.id,
|
||||
userGroupName: this.newCollectionName
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.updateUserGroupName,data).then(
|
||||
(rv: any) => {
|
||||
message.success('Change successfully')
|
||||
this.collectionList[this.renameData.index].name = this.newCollectionName
|
||||
this.collectionList[this.renameData.index].updateDate = rv.updateDate
|
||||
this.renameVisivle = false
|
||||
this.newCollectionName = ''
|
||||
this.renameData = {}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
retrieveHome(record:any){
|
||||
this.$router.push({name:'home',params: {id:record.id}})
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.history_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.page_content {
|
||||
position: relative;
|
||||
|
||||
.page_content_bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page_content_body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.history_page_body{
|
||||
width: 100%;
|
||||
height: calc(100% - 7rem);
|
||||
padding: 0 2.5rem 4rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.history_header{
|
||||
font-size: 1.8rem;
|
||||
height: 6.3rem;
|
||||
line-height: 6.3rem;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.history_table_search{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.range_picker{
|
||||
width: 36rem;
|
||||
height: 4.8rem;
|
||||
|
||||
.ant-picker-input > input{
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.range_picker_icon{
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content_search_block{
|
||||
margin-left: 4rem;
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 32.8rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.6rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 7.2rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history_table_content{
|
||||
margin-top: 2.6rem;
|
||||
width: 100%;
|
||||
height: calc(100% - 13.7rem);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
padding-bottom: 3rem;
|
||||
|
||||
.ant-table{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ant-table-body{
|
||||
overflow-y: auto !important;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td{
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr{
|
||||
|
||||
&:hover > td{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-pagination-right{
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
|
||||
.operate_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
|
||||
.operate_item{
|
||||
font-size: 1.4rem;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.rename_modal_component{
|
||||
|
||||
.collection_rename_content{
|
||||
padding:2rem 9.2rem 3rem;
|
||||
|
||||
|
||||
.rename_form_content{
|
||||
|
||||
.rename_form_input{
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
margin-top: 1rem;
|
||||
border: 0.1rem solid #B4BED7;
|
||||
padding-left: 2.1rem;
|
||||
line-height: 4.6rem;
|
||||
font-size: 1.8rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder {
|
||||
color:#A5B0C2,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rename_submit_button{
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
background: #343579;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
width: 16rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 4.5rem auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1106
src/views/HomeView.vue
Normal file
1106
src/views/HomeView.vue
Normal file
File diff suppressed because it is too large
Load Diff
848
src/views/LibraryPage.vue
Normal file
848
src/views/LibraryPage.vue
Normal file
@@ -0,0 +1,848 @@
|
||||
<template>
|
||||
<div class="library_page">
|
||||
<div class="page_content">
|
||||
<img
|
||||
class="page_content_bg"
|
||||
src="@/assets/images/homePage/bg.png"
|
||||
/>
|
||||
<div class="page_content_body">
|
||||
<HeaderComponent></HeaderComponent>
|
||||
<div class="library_page_body">
|
||||
<div class="library_body_left">
|
||||
<div class="library_menu_list" v-for="(menu,index) in menuList" :key="menu.title">
|
||||
<div :class="['menu_item', selectCode==menu.code ? 'select_menu_item' :'']" @click="selectMenuItem(menu,index)">
|
||||
<div class="menu_item_left">
|
||||
<div :class="['icon','iconfont',menu.icon,'type_icon']"></div>
|
||||
<div>{{menu.title}}</div>
|
||||
</div>
|
||||
<div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div>
|
||||
</div>
|
||||
<div v-show="menu.showChildren && menu.children.length">
|
||||
<div :class="['menu_item','child_menu_item', selectCode==child.code ? 'select_menu_item' :'']" v-for="child in menu.children" :key="child.title" @click="selectMenuItem(child,index)">
|
||||
{{child.title}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="library_body_right">
|
||||
<div class="library_right_header">
|
||||
<div class="library_header_left">
|
||||
<div class="header_operate_item operate_select">
|
||||
<a-upload
|
||||
:before-upload="beforeUpload"
|
||||
:customRequest="selectCode != 'Models' ? customRequest : function(){}"
|
||||
:multiple="selectCode != 'Models'"
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<div>Upload</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
|
||||
<div :class="['header_operate_item',selectImgList.length>0?'operate_select':'']" @click="deleteBatchPic()">Delete</div>
|
||||
<div :class="['header_operate_item',selectImgList.length>0?'operate_select':'']" @click="showRenameModal('','batch')">Rename</div>
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Search by your style code" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="librart_headr_right">
|
||||
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="designType"
|
||||
:options="disignTypeList"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="libray_right_content">
|
||||
<div class="right_content_body">
|
||||
<div class="content_body_header">
|
||||
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
|
||||
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
|
||||
<div>all</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content_body_table scroll_style">
|
||||
<div class="content_img_item" v-for="(img,index) in imgList" :key="img.id" @click="selectImgItem(img)">
|
||||
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
|
||||
<img v-lazy="img.url" :key="img.url" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
|
||||
<div class="img_item_hover">
|
||||
<div class="img_operate_content">
|
||||
<div class="img_operate_block" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
|
||||
<span class="icon iconfont icon-tianxie operate_icon"></span>
|
||||
</div>
|
||||
<div class="img_operate_block" @click.stop="showRenameModal(img,'single')">
|
||||
<span class="icon iconfont icon-zhongmingming operate_icon"></span>
|
||||
</div>
|
||||
<div class="img_operate_block" @click.stop="deleteSinglePic(img,index)">
|
||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_img_name">{{img.name}}</div>
|
||||
</div>
|
||||
<div class="no_data_block" v-show="!imgList.length && !isShowMark">
|
||||
<img src="@/assets/images/homePage/null_img.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table_pagination" v-show="imgList.length">
|
||||
<a-pagination
|
||||
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
:showQuickJumper="true"
|
||||
:showSizeChanger="false"
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal class="library_rename_modal_component"
|
||||
v-model:visible="renameVisivle"
|
||||
:footer="null"
|
||||
title="Rename Pic"
|
||||
width="56rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@onCancel="closeRenameModal"
|
||||
>
|
||||
<div class="collection_rename_content">
|
||||
<div class="rename_form_content">
|
||||
<input class="rename_form_input" placeholder="Enter a new name" v-model="newPicName" @keydown.enter="confrimRename()">
|
||||
</div>
|
||||
<div class="rename_button_list">
|
||||
<div class="rename_button_item rename_cancel_button" @click="closeRenameModal()">Cancel</div>
|
||||
<div class="rename_button_item rename_submit_button" @click="confrimRename()">Sure</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
|
||||
<ModelPlacementMobile ref="ModelPlacementMobile"></ModelPlacementMobile>
|
||||
|
||||
<!-- 蒙层 start-->
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<!-- 蒙层 end-->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent ,ref,createVNode} from 'vue'
|
||||
import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
|
||||
import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue';
|
||||
import { Modal,message,Upload} from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import {getUploadUrl,isMoible} from '@/tool/util'
|
||||
import { Https } from "@/tool/https";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
HeaderComponent,
|
||||
ModelPlacement,
|
||||
ModelPlacementMobile,
|
||||
},
|
||||
setup() {
|
||||
let menuList = ref([
|
||||
{title:'Moodboard',code:'Moodboard',icon:'icon-moban',showChildren:false,children:[]},
|
||||
{title:'Printboard',code:'Printboard',icon:'icon-dayin-dayinji',showChildren:false,children:[]},
|
||||
{title:'Sketchboard',code:'SketchboardFirst',icon:'icon-sumiao',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
|
||||
{title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
|
||||
{title:'Mannequin',code:'Models',icon:'icon-mote',showChildren:false,children:[]},
|
||||
|
||||
])
|
||||
let selectImgList:any = ref([])
|
||||
let selectCode:any = ref('Moodboard')
|
||||
let searchPictureName = ref('')
|
||||
let designType:any = ref('Outwear')
|
||||
let disignTypeList = [
|
||||
{
|
||||
value: "Outwear",
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: "Blouse",
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: "Dress",
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: "Trousers",
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: "Skirt",
|
||||
label: "Skirt",
|
||||
},
|
||||
]
|
||||
let imgList = ref([])
|
||||
let currentPage:any = ref(1)
|
||||
let pageSize:any = ref(18)
|
||||
let total:any = ref(20)
|
||||
let renameVisivle:any = ref(false)
|
||||
let renameType:any = ref('single')//修改名字的方式single-单个 batch-批量
|
||||
let newPicName:any = ref('')
|
||||
let uploadUrl:any = ref('')
|
||||
let currentUploadFileNum:any = ref(0) //当次上传文件数量
|
||||
let isShowMark:any = ref(false) //蒙层
|
||||
let selectSingleImg:any = ref({}) //保存单个图片数据
|
||||
return {
|
||||
menuList,
|
||||
selectImgList,
|
||||
selectCode,
|
||||
searchPictureName,
|
||||
disignTypeList,
|
||||
designType,
|
||||
imgList,
|
||||
currentPage,
|
||||
pageSize,
|
||||
total,
|
||||
renameVisivle,
|
||||
renameType,
|
||||
newPicName,
|
||||
uploadUrl,
|
||||
currentUploadFileNum,
|
||||
isShowMark,
|
||||
selectSingleImg
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.uploadUrl = getUploadUrl()
|
||||
this.getLibraryList()
|
||||
},
|
||||
methods:{
|
||||
selectMenuItem(menu:any,index:any){
|
||||
if(menu.children?.length){ //证明是有子菜单
|
||||
menu.showChildren = !menu.showChildren
|
||||
}else{
|
||||
this.selectCode = menu.code
|
||||
this.currentPage = 1,
|
||||
this.total = 0,
|
||||
this.searchPictureName = ''
|
||||
this.imgList = [],
|
||||
this.designType = 'Outwear',
|
||||
this.selectImgList = []
|
||||
this.selectSingleImg = {}
|
||||
this.getLibraryList()
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
handleChange(){
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
// let Cropper:any = this.$refs.Cropper
|
||||
if(this.selectCode == 'Models'){
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e:any) => {
|
||||
let data_new;
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data_new = e.target.result;
|
||||
}
|
||||
this.placementClick({url:data_new,file:file.originFileObj})
|
||||
|
||||
};
|
||||
// 转化为base64
|
||||
// reader.readAsDataURL(file)
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file.originFileObj);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//改变页码
|
||||
changePage(current: number, pageSize: number){
|
||||
this.currentPage = current
|
||||
this.pageSize = pageSize
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
//选择图片
|
||||
selectImgItem(imgData:any){
|
||||
if(this.selectImgList.indexOf(imgData.id) === -1){
|
||||
this.selectImgList.push(imgData.id)
|
||||
}else{
|
||||
let index = this.selectImgList.indexOf(imgData.id)
|
||||
this.selectImgList.splice(index,1)
|
||||
}
|
||||
},
|
||||
|
||||
//选择所有的图片
|
||||
selectAllImg(){
|
||||
if(this.selectImgList.length == this.imgList.length){
|
||||
this.selectImgList = []
|
||||
}else{
|
||||
this.selectImgList = this.imgList.map((v:any) => v.id)
|
||||
}
|
||||
},
|
||||
|
||||
closeRenameModal(){
|
||||
this.renameVisivle= false;
|
||||
this.newPicName = ''
|
||||
},
|
||||
|
||||
//确定修改名称
|
||||
confrimRename(){
|
||||
let data = {
|
||||
libraryIds:this.renameType === 'single' ? [this.selectSingleImg.id] : this.selectImgList,
|
||||
libraryName:this.newPicName,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.batchUpdateLibraryName, data).then(
|
||||
(rv: any) => {
|
||||
if(this.renameType ==='batch'){
|
||||
this.selectImgList = []
|
||||
}
|
||||
this.getLibraryList()
|
||||
this.closeRenameModal()
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.closeRenameModal()
|
||||
});
|
||||
},
|
||||
|
||||
//打开修改名称弹窗
|
||||
showRenameModal(data:any,type:any){
|
||||
if(type =='batch' && !this.selectImgList.length){ //批量但未选中
|
||||
return
|
||||
}
|
||||
if(type === 'single'){
|
||||
this.selectSingleImg = data
|
||||
}
|
||||
this.renameType = type
|
||||
this.renameVisivle = true
|
||||
},
|
||||
|
||||
//删除单个图片
|
||||
deleteSinglePic(data:any,index:any){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'Are you sure to delete the picture?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
// centered:true,
|
||||
onOk() {
|
||||
_this.confirmDeletePic(data,index)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//批量删除图片
|
||||
deleteBatchPic(){
|
||||
if(!this.selectImgList.length){
|
||||
return
|
||||
}
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'Are you sure to delete the picture?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
// centered:true,
|
||||
onOk() {
|
||||
_this.confirmDeletePic('',0)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//确定删除图片 有data则是单个
|
||||
confirmDeletePic(data:any,index:any){
|
||||
let libraryIds = data ? [data.id] : this.selectImgList
|
||||
let newData = {
|
||||
libraryIds:libraryIds
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
|
||||
(rv: any) => {
|
||||
if(data && data.id){
|
||||
this.imgList.splice(index, 1)
|
||||
}else{
|
||||
this.selectImgList = []
|
||||
this.getLibraryList()
|
||||
}
|
||||
}
|
||||
).catch((res)=>{
|
||||
});
|
||||
},
|
||||
|
||||
beforeUpload(file:any,fileList:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
this.currentUploadFileNum = fileList.length
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
|
||||
|
||||
customRequest(event:any){
|
||||
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
|
||||
let new_data = {
|
||||
file:event.file,
|
||||
level1Type:this.selectCode,
|
||||
level2Type:designType,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
this.currentUploadFileNum --
|
||||
if(!this.currentUploadFileNum){
|
||||
this.getLibraryList()
|
||||
}
|
||||
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.currentUploadFileNum --
|
||||
if(!this.currentUploadFileNum){
|
||||
this.getLibraryList()
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getLibraryList(){
|
||||
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
|
||||
let data = {
|
||||
level1Type:this.selectCode,
|
||||
level2Type:designType,
|
||||
page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize,
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
(rv: any) => {
|
||||
this.imgList = rv.content
|
||||
this.total = rv.total
|
||||
this.isShowMark = false
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.isShowMark = false
|
||||
});
|
||||
},
|
||||
|
||||
//编辑模特打点
|
||||
editPlacementClick(data:any){
|
||||
let newData = {
|
||||
...data.libraryModelPoint,
|
||||
url:data.url,
|
||||
}
|
||||
this.placementClick(newData)
|
||||
},
|
||||
|
||||
//给模特打点编辑
|
||||
placementClick(data:any){
|
||||
let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
|
||||
placementModal.showPlacementModal(data)
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.library_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.page_content {
|
||||
position: relative;
|
||||
|
||||
.page_content_bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page_content_body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.library_page_body{
|
||||
width: 100%;
|
||||
height: calc(100% - 7rem);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.library_body_left{
|
||||
width: 23.5rem;
|
||||
height: 100%;
|
||||
background: rgba(255,255,255,0.4);
|
||||
|
||||
.library_menu_list{
|
||||
|
||||
.menu_item{
|
||||
width: 100%;
|
||||
height: 6.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem 0 2.5rem;
|
||||
border-left: 0.5rem solid transparent;
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
cursor: pointer;
|
||||
|
||||
&.child_menu_item{
|
||||
padding-left: 6.5rem;
|
||||
}
|
||||
|
||||
&.select_menu_item{
|
||||
background: #E6E6F6;
|
||||
border-color: #343579;;
|
||||
}
|
||||
|
||||
.menu_item_left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
||||
.type_icon{
|
||||
font-size: 2.2rem;
|
||||
color: #030303;
|
||||
margin-right: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_rotate{
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
animation-direction: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.library_body_right{
|
||||
width: calc(100% - 23.5rem);
|
||||
height: 100%;
|
||||
|
||||
.library_right_header{
|
||||
display: flex;
|
||||
padding: 0 3.5rem 0 2.8rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(255,255,255,0.4);
|
||||
box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25);
|
||||
|
||||
.library_header_left{
|
||||
height: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header_operate_item{
|
||||
margin-right: 5rem;
|
||||
color: #C2C2C2;
|
||||
font-size: 1.6rem;
|
||||
|
||||
.ant-upload-list-text{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.operate_select{
|
||||
color:#333333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-right: 11rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content_search_block{
|
||||
margin-left: 4rem;
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 32.8rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.6rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 7.2rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.librart_headr_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select_block{
|
||||
background: #FFFFFF;
|
||||
color: #1A1A1A !important;
|
||||
|
||||
.icon-xiala{
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.libray_right_content{
|
||||
width:100%;
|
||||
height:calc(100% - 8rem);
|
||||
padding: 0.1rem 0 0 0.3rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.right_content_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(246,246,250,0.4);
|
||||
padding: 0 2rem 5rem 1rem;
|
||||
|
||||
.content_body_header{
|
||||
height: 7.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.check_all_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.6rem;
|
||||
color: #64686D;
|
||||
cursor: pointer;
|
||||
|
||||
&.check_all{
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.check_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
padding: 0.3rem;
|
||||
margin-right: 0.7rem;
|
||||
|
||||
.check_block_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_body_table{
|
||||
width: 100%;
|
||||
height: calc(100% - 12rem);
|
||||
overflow-y:auto;
|
||||
|
||||
.content_img_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 1.4rem;
|
||||
margin-bottom: 2.8rem;
|
||||
|
||||
.content_img_item_block{
|
||||
border: 0.1rem solid transparent;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_item_img{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.content_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.board_content_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover .img_item_hover{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.img_item_hover{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top:0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
display: none;
|
||||
|
||||
.img_operate_content{
|
||||
position: absolute;
|
||||
right: 0.6rem;
|
||||
top: 0.6rem;
|
||||
}
|
||||
|
||||
.img_operate_block{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.4rem;
|
||||
|
||||
.operate_icon{
|
||||
font-size: 1.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_img_name{
|
||||
width: 16.5rem;
|
||||
height: 3.5rem;
|
||||
line-height: 3.5rem;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
.no_data_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.table_pagination{
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.library_rename_modal_component{
|
||||
|
||||
.collection_rename_content{
|
||||
padding:0 6.8rem 1.8rem;
|
||||
|
||||
|
||||
.rename_form_content{
|
||||
|
||||
.rename_form_input{
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
margin-top: 1rem;
|
||||
border: 0.1rem solid #B4BED7;
|
||||
padding-left: 2.1rem;
|
||||
line-height: 4.6rem;
|
||||
font-size: 1.8rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::placeholder {
|
||||
color:#A5B0C2,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rename_button_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-top: 3rem;
|
||||
|
||||
.rename_button_item{
|
||||
width: 8.6rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rename_cancel_button{
|
||||
background: #E4E5EB;
|
||||
color: #030303;
|
||||
margin-right: 1.8rem;
|
||||
}
|
||||
|
||||
.rename_submit_button{
|
||||
background: #343579;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
715
src/views/LoginPage.vue
Normal file
715
src/views/LoginPage.vue
Normal file
@@ -0,0 +1,715 @@
|
||||
<template>
|
||||
<div class="login_page">
|
||||
<div class="page_content">
|
||||
<img
|
||||
class="login_logo"
|
||||
src="@/assets/images/loginPage/aida_Logo_login.png"
|
||||
/>
|
||||
<!-- 账号密码和邮箱登录 start-->
|
||||
<div class="login_content" v-if="isLogin === 1">
|
||||
<div class="login_type_list">
|
||||
<div
|
||||
:class="[
|
||||
'login_type_item','username_login_item',
|
||||
'login_active',
|
||||
]"
|
||||
>
|
||||
Log on to AiDA
|
||||
</div>
|
||||
</div>
|
||||
<!-- 账号密码登录 start -->
|
||||
<div v-show="loginType == 'username'">
|
||||
<div class="login_form_content">
|
||||
<div class="login_form_title">Username</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
placeholder="Enter your username"
|
||||
v-model="username"
|
||||
/>
|
||||
<div class="login_form_title marign_top30">
|
||||
<div>Password</div>
|
||||
<!-- <div class="tip_content" @click="changeIsLogin(2)">
|
||||
Forgot password？
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="password_input_block">
|
||||
<input
|
||||
class="login_form_input"
|
||||
:type="passwordType"
|
||||
placeholder="Enter your password"
|
||||
v-model="password"
|
||||
@keydown.enter="submitPerLogin()"
|
||||
/>
|
||||
<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="login_submit_button marign_top40"
|
||||
@click="submitPerLogin()"
|
||||
>
|
||||
Continue
|
||||
</div>
|
||||
|
||||
<div class="login_text" >
|
||||
<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 账号密码登录 end -->
|
||||
|
||||
<!-- 邮箱登录 start -->
|
||||
<div v-show="loginType == 'email'">
|
||||
<div v-show="emailStap === 1" class="forget_password_content">
|
||||
<div class="forget_password_content_block" @click="changeLoginType('username')">
|
||||
<span class="icon iconfont icon--shangyibu"></span
|
||||
><span class="forget_password_content_title"
|
||||
>Log on to AiDA</span
|
||||
>
|
||||
</div>
|
||||
<div class="login_form_content">
|
||||
<div class="login_form_title">Email</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
placeholder="Enter your email address"
|
||||
v-model="email"
|
||||
@keydown.enter="emailNextStepFun()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="login_submit_button marign_top40"
|
||||
@click="emailNextStepFun()"
|
||||
>
|
||||
Continue
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="emailStap === 2" class="email_last_step">
|
||||
|
||||
<div class="email_last_step_block" @click="emailLastStepFun()">
|
||||
<span class="icon iconfont icon--shangyibu"></span
|
||||
><span class="email_last_step_content"
|
||||
>Verify with one-time verification code</span
|
||||
>
|
||||
</div>
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content">
|
||||
Sent to {{ email }}
|
||||
</div>
|
||||
<div class="tip_content">
|
||||
<span v-show="time">{{ time }}s</span>
|
||||
<span v-show="!time" @click="emailNextStepFun()"
|
||||
>Resend</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<VerificationCodeInput
|
||||
:ct="emailCode"
|
||||
@sendCaptcha="submitEmailLogin($event)"
|
||||
></VerificationCodeInput>
|
||||
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content email_tip_content">
|
||||
Please check the junk box if you haven't received verification code
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 邮箱登录 end -->
|
||||
</div>
|
||||
|
||||
<!-- 忘记密码 start -->
|
||||
<div class="forget_password_content" v-else>
|
||||
<div class="forget_password_content_block" @click="forgetPasswordLastStepFun()">
|
||||
<span class="icon iconfont icon--shangyibu"></span
|
||||
><span class="forget_password_content_title"
|
||||
>Retrieve password</span
|
||||
>
|
||||
</div>
|
||||
<div v-show="frogetPasswordStep === 1">
|
||||
<div class="forget_passored_form_content">
|
||||
<div class="forget_passored_form_title">Email</div>
|
||||
<input
|
||||
class="forget_passored_form_input"
|
||||
placeholder="Enter your email"
|
||||
v-model="forgetPasswordEmail"
|
||||
@keydown.enter="forgetPasswordNextStepFun()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="forget_submit_button marign_top40"
|
||||
@click="forgetPasswordNextStepFun()"
|
||||
>
|
||||
Next step
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="frogetPasswordStep === 2">
|
||||
<div class="forget_verif_code_des">Verification Code</div>
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content">
|
||||
Sent to {{ forgetPasswordEmail }}
|
||||
</div>
|
||||
<div class="tip_content">
|
||||
<span v-show="time">{{ time }}s</span>
|
||||
<span
|
||||
v-show="!time"
|
||||
@click="forgetPasswordNextStepFun()"
|
||||
>Resend</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<VerificationCodeInput
|
||||
:ct="emailCode"
|
||||
@sendCaptcha="submitPasswordCode($event)"
|
||||
></VerificationCodeInput>
|
||||
</div>
|
||||
|
||||
<div v-show="frogetPasswordStep === 3">
|
||||
<div class="forget_passored_form_content">
|
||||
<div class="forget_passored_form_title">Password</div>
|
||||
<input
|
||||
class="forget_passored_form_input"
|
||||
placeholder="Enter a new password"
|
||||
v-model="newPassword"
|
||||
@keydown.enter="submitResetPassword()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="forget_submit_button marign_top40"
|
||||
@click="submitResetPassword()"
|
||||
>
|
||||
Submit
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 忘记密码 end -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="login_footer">
|
||||
<div class="login_footer_item"><div class="login_footer_item_text">©2022 CodeCreate</div></div>
|
||||
<div class="login_footer_item">
|
||||
<div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-terms-and-conditions/')">Terms&Conditions</div>
|
||||
<div class="login_footer_line"></div>
|
||||
<div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-subscription-agreement/')">Privacy Policy</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { isEmail } from "@/tool/util";
|
||||
import { setCookie } from "@/tool/cookie";
|
||||
import { message } from "ant-design-vue";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
|
||||
const md5 = require("md5");
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
},
|
||||
setup(){
|
||||
let timer:any = 0
|
||||
return{
|
||||
timer
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLogin: 1, //是否为登录 1-登录， 2-忘记密码
|
||||
loginType: "username",
|
||||
emailStap: 1, // 邮箱登录步骤
|
||||
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
||||
emailNextStep: true,
|
||||
username: "",
|
||||
password: "",
|
||||
email: "", //邮箱登录邮箱
|
||||
frogetPasswordStep: 1, //忘记密码的步骤
|
||||
forgetPasswordEmail: "",
|
||||
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
||||
forgetEmailValue: "", //忘记密码的邮箱验证码保存值
|
||||
newPassword: "", //新密码
|
||||
isCheckRobot: false,
|
||||
time: 60, //60秒倒计时
|
||||
passwordType:'password',
|
||||
userId:'',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeLoginType(type: string) {
|
||||
this.loginType = type;
|
||||
},
|
||||
|
||||
//是否忘记密码页面
|
||||
changeIsLogin(isLogin: number) {
|
||||
if (isLogin === 1) {
|
||||
//登录
|
||||
this.forgetPasswordEmail = "";
|
||||
this.frogetPasswordStep = 1;
|
||||
this.forgetEmailCode = ["", "", "", "", "", ""];
|
||||
this.emailStap = 1;
|
||||
this.clearTimer();
|
||||
} else {
|
||||
this.username = "";
|
||||
this.password = "";
|
||||
}
|
||||
this.isLogin = isLogin;
|
||||
},
|
||||
|
||||
//邮箱登录的下一步
|
||||
emailNextStepFun() {
|
||||
if (!isEmail(this.email)) {
|
||||
message.error("The email format is incorrect");
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
email: this.email,
|
||||
operationType: "LOGIN",
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
this.emailStap = 2;
|
||||
this.time = 60;
|
||||
this.emailCode = ["", "", "", "", "", ""]
|
||||
this.createTimer();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//邮箱登录的上一步
|
||||
emailLastStepFun() {
|
||||
this.emailStap = 1;
|
||||
this.email = "";
|
||||
(this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
||||
},
|
||||
|
||||
//忘记密码的下一步
|
||||
forgetPasswordNextStepFun() {
|
||||
if (!isEmail(this.forgetPasswordEmail)) {
|
||||
message.error("The email format is incorrect");
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
email: this.forgetPasswordEmail,
|
||||
operationType: "FORGET_PWD",
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
this.frogetPasswordStep = 2;
|
||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
||||
this.createTimer();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//忘记密码的上一步
|
||||
forgetPasswordLastStepFun() {
|
||||
if (this.frogetPasswordStep === 1) {
|
||||
this.changeIsLogin(1);
|
||||
} else {
|
||||
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
||||
this.forgetPasswordEmail = "";
|
||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
||||
this.clearTimer();
|
||||
}
|
||||
},
|
||||
|
||||
//忘记密码填写完邮箱验证码进行下一步
|
||||
submitPasswordCode(emailVerifyCode: any) {
|
||||
this.forgetEmailValue = emailVerifyCode;
|
||||
this.frogetPasswordStep = 3;
|
||||
this.clearTimer();
|
||||
},
|
||||
|
||||
//改变勾选是否是机器人
|
||||
checkRobot() {
|
||||
this.isCheckRobot = !this.isCheckRobot;
|
||||
},
|
||||
|
||||
//提交账号密码预先登录
|
||||
submitPerLogin() {
|
||||
if (!this.username || !this.password) {
|
||||
message.error("Please enter your password");
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
password: md5(this.password + "abc"),
|
||||
userName: this.username,
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.preLogin, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
this.userId = rv.userId
|
||||
this.loginType = 'email'
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
changePasswordType(){
|
||||
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
|
||||
},
|
||||
|
||||
//邮箱登录提交
|
||||
submitEmailLogin(emailVerifyCode: any) {
|
||||
let data = {
|
||||
email: this.email,
|
||||
emailVerifyCode: emailVerifyCode,
|
||||
loginType: "EMAIL",
|
||||
userId:this.userId
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountLogin, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
this.createTimer();
|
||||
let token = rv.token;
|
||||
setCookie("token", token);
|
||||
setCookie("userInfo", JSON.stringify(rv));
|
||||
this.turnToHomePage();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//修改密码提交
|
||||
submitResetPassword() {
|
||||
let data = {
|
||||
email: this.forgetPasswordEmail,
|
||||
emailVerifyCode: this.forgetEmailValue,
|
||||
password: md5(this.newPassword + "abc"),
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
message.success("Changing the password successfully");
|
||||
this.changeIsLogin(1);
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//创建定时器
|
||||
createTimer() {
|
||||
this.timer = setInterval(() => {
|
||||
this.time--;
|
||||
if (!this.time) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
//清除定时器
|
||||
clearTimer() {
|
||||
this.time = 60;
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},
|
||||
|
||||
//跳转到首页
|
||||
turnToHomePage() {
|
||||
this.$router.push("/home");
|
||||
},
|
||||
|
||||
turnToWindow(url: any) {
|
||||
window.open(url);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.login_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.page_content {
|
||||
// position: relative;
|
||||
|
||||
.login_logo {
|
||||
position: absolute;
|
||||
left: 4rem;
|
||||
top: 2.5rem;
|
||||
width: 11rem;
|
||||
}
|
||||
|
||||
.login_content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 60rem;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
||||
border-radius: 1rem;
|
||||
padding: 3rem 6rem 6.5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.login_type_list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.login_type_item {
|
||||
text-align: center;
|
||||
font-size: 3.6rem;
|
||||
font-weight: bold;
|
||||
color: #D7D7D7;
|
||||
cursor: pointer;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
|
||||
&.login_active {
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login_form_content {
|
||||
margin-top: 4rem;
|
||||
|
||||
.login_form_title {
|
||||
font-size: 1.6rem;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.password_input_block{
|
||||
position: relative;
|
||||
|
||||
.password_show_icon{
|
||||
position: absolute;
|
||||
font-size: 2.4rem;
|
||||
right: 2rem;
|
||||
top:1.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.login_form_input {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
margin-top: 1rem;
|
||||
border: 0.1rem solid #DFDFDF;
|
||||
border-radius: 2.5rem;
|
||||
padding-left: 2.1rem;
|
||||
line-height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
|
||||
|
||||
&::placeholder {
|
||||
color: #a5b0c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email_last_step {
|
||||
margin-top: 4rem;
|
||||
|
||||
.email_last_step_block{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon--shangyibu {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.email_last_step_content {
|
||||
margin-left: 1rem;
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
.login_submit_button {
|
||||
height: 5rem;
|
||||
background: #343579;
|
||||
border-radius: 2.5rem;
|
||||
line-height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login_text {
|
||||
font-size: 1.6rem;
|
||||
margin-top: 4rem;
|
||||
color: #151515;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.forget_password_text{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget_password_content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 60rem;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
||||
border-radius: 1rem;
|
||||
padding: 3rem 6rem 6.5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.forget_password_content_block{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon--shangyibu {
|
||||
font-size: 3.8rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
.forget_password_content_title {
|
||||
font-size: 3.2rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.forget_passored_form_content {
|
||||
margin-top: 3.5rem;
|
||||
|
||||
.forget_passored_form_title {
|
||||
font-size: 2.4rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.forget_passored_form_input {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
margin-top: 1rem;
|
||||
border: 0.1rem solid #DFDFDF;
|
||||
border-radius: 2.5rem;
|
||||
padding-left: 2.1rem;
|
||||
line-height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: #a5b0c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget_verif_code_des {
|
||||
font-size: 2.4rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.forget_submit_button {
|
||||
height: 5rem;
|
||||
background: #343579;
|
||||
border-radius: 2.5rem;
|
||||
line-height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login_footer{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
bottom: 3.5rem;
|
||||
width: 100%;
|
||||
padding: 0 4rem;
|
||||
|
||||
.login_footer_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.login_footer_item_text{
|
||||
font-size: 1.3rem;
|
||||
color: #151515;
|
||||
}
|
||||
|
||||
.footer_item_text_pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login_footer_line{
|
||||
width: 0.1rem;
|
||||
height: 2rem;
|
||||
margin: 0 2rem;
|
||||
background: #B9B9B9;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.marign_top20 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.marign_top22 {
|
||||
margin-top: 2.2rem;
|
||||
}
|
||||
|
||||
.marign_top30 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.marign_top40 {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.tip_content {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.email_last_step_des {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.sent_email_content {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #a5b0c2;
|
||||
}
|
||||
|
||||
.email_tip_content{
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user