Skip to content

P
pptist
Commit 51e1659c authored by 罗超's avatar 罗超
Browse files
Options

Merge branch 'router' of http://gitlab.oytour.com/viitto/pptist into router

parents 63b70339 8c17d471
Hide whitespace changes
Inline Side-by-side
Showing with 500 additions and 112 deletions
src/App.vue
View file @ 51e1659c
......@@ -42,6 +42,7 @@ useFontStore().loadAllFonts()
<style lang="scss">
@import url('@/assets/styles/common.css');
@import url('//at.alicdn.com/t/c/font_635492_mmnd6nkbmf8.css');
#app {
height: 100%;
}
......
src/assets/styles/common.css
View file @ 51e1659c
......@@ -215,6 +215,9 @@ page {
.q-mb-sm{
margin-bottom: 5px;
}
.q-ml-md{
margin-left: 10px;
}
.q-mx-sm{
margin-left: 5px;
margin-right: 5px;
......@@ -233,10 +236,17 @@ page {
padding-left: 5px;
padding-right:5px ;
}
.q-px-md{
padding-left: 10px;
padding-right: 10px ;
}
.q-px-xl{
padding-left: 30px;
padding-right: 30px;
}
.q-pa-xs{
padding: 5px;
}
.q-pa-xl{
padding: 30px;
}
......@@ -434,6 +444,9 @@ page {
.q-mr-lg{
margin-right:20px
}
.q-mt-xs{
margin-top: 5px;
}
.q-mt-lg{
margin-top:20px
}
......@@ -457,6 +470,13 @@ page {
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
.rounded6{
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.relative{
position: relative;
}
......@@ -475,16 +495,61 @@ page {
.text-nategive{
color: #FF4B86;
}
.color0{
color: #000;
}
.colorF{
color: #FFF;
}
.colorBA{
color: #BABABA;
}
.text-right{
text-align: right;
}
.text-left{
text-align: left;
}
.text-center{
text-align: center;
}
.text-small{
font-size: 12px;
font-family: microsoft yahei;
}
.PingFangSC{
font-family: 'PingFang SC';
}
.fz12{
font-size: 12px;
}
.fz14{
font-size: 14px;
}
.fz16{
font-size: 16px;
}
.fz18{
font-size: 18px;
}
.fz20{
font-size: 20px;
}
.fz22{
font-size: 12px;
}
.fz24{
font-size: 24px;
}
.fz26{
font-size: 26px;
}
.fz28{
font-size: 28px;
}
.fz30{
font-size: 30px;
}
.text-title{
font-size: 1.25rem;
font-family: alifont;
......@@ -553,4 +618,10 @@ page {
top: 0;
bottom: 0;
z-index: 9;
}
.opacity0{
opacity: 0;
}
.columnCount5 {
column-count: 5;
}
\ No newline at end of file
src/components/User/UserCard.vue
View file @ 51e1659c
......@@ -112,7 +112,9 @@ import { storeToRefs } from "pinia";
const useUser = useUserStore();
const { userInfo } = storeToRefs(useUser);
const format = (percentage: number) => {
return percentage == 100 ? '' : ``
}
const moreList = [
{ icon: require("@/assets/img/homeMore0.png"), Name: "添加到桌面" },
{ icon: require("@/assets/img/homeMore1.png"), Name: "关注公众号" },
......
src/views/Editor/Toolbar/ElementTemplateData.vue
View file @ 51e1659c
......@@ -330,8 +330,11 @@
{Name:'青',Id:5},
{Name:'蓝',Id:6},
{Name:'紫',Id:7},
{Name:'黑',Id:8},
{Name:'白',Id:9},
{Name:'玫红',Id:8},
{Name:'咖啡色',Id:9},
{Name:'白',Id:10},
{Name:'黑',Id:11},
{Name:'灰',Id:12},
]
const cursors = [] as Array<any>
......
src/views/Market/Index.vue
View file @ 51e1659c
<template>
<div ref="marketRef" class="Market-from">
<div class="Market-fromBj"></div>
<div class="relative" style="padding: 22px; max-width:1440px; margin:0 auto;z-index: 2;">
<div class="relative" style="padding: 22px 17px; max-width:1440px; margin:0 auto;z-index: 2;">
<div :class="[datas.scrollTop>100?'MarketHeader':'']">
<div class="row items-center">
<img class="q-pr-36" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708239425000_437.png" style="height: 30px;" />
......@@ -11,14 +11,14 @@
<div class="Market-select-line absolute"></div>
<div class="row items-center pointer">
<img src="../../assets/img/home-search.png" width="21" height="21"
@click="queryObj.pageIndex=1,queryTemplateBySearchHandler()"/>
@click="search"/>
</div>
</template>
</el-input>
</div>
<div class="row items-center" style="text-align: right;">
<div>
<div class="MarketAdd pointer" @click="addTemplate(1)">创建</div>
<div v-if="model==1" >
<div class="MarketAdd pointer" @click="datas.addVisible=true">创建</div>
</div>
<UserCard></UserCard>
</div>
......@@ -29,36 +29,28 @@
<div class="column text-small">
<div class="row flex-between items-center marketTagTitleBox">
<span class="marketTag-Title"><span>目的地</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
<el-button color="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
</div>
<div class="row wrap q-pt-sm">
<el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
<el-check-tag :checked="queryObj.CountryName == x.CountryName"
@change="onCountryNameChangeHandler(x.CountryName)" class="text-small"
v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
<Popover v-if="countriesOther.length>0" trigger="click" placement="bottom-start" v-model:value="MenuCountryVisible">
<template #content>
<el-check-tag :checked="queryObj.CountryName == x.CountryName"
@change="onCountryNameChangeHandler(x.CountryName,1),MenuCountryVisible=false" class="text-small q-mr-md"
<el-dropdown v-if="countriesOther.length>0" trigger="click">
<el-button color="#EFEFEF">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<div class="row wrap q-pt-lg marketTagDown">
<el-check-tag :checked="x.checked"
@change="onCountryNameChangeHandler(x)" class="text-small"
v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag>
</div>
</template>
<div class="row items-center">
<el-check-tag :checked="CountryOtherName"
class="text-small q-mr-md">
<span class="q-mr-md" v-if="CountryOtherName">
{{queryObj.CountryName}}
</span>
<el-icon class="pointer" v-if="!MenuCountryVisible">
<ArrowDownBold @click="MenuCountryVisible = false"/>
</el-icon>
<el-icon class="pointer" v-else>
<ArrowUpBold @click="MenuCountryVisible = true"/>
</el-icon>
</el-check-tag>
</div>
</Popover>
</el-dropdown>
<el-button v-else color="#FFF" class="opacity0">
<span></span>
</el-button>
</div>
<div class="row wrap q-pt-sm ">
<el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')">通用</el-check-tag>
<el-check-tag :checked="x.checked"
@change="onCountryNameChangeHandler(x)" class="text-small"
v-for="(x,i) in countries" :key="i">{{x.CountryName}}</el-check-tag>
</div>
</div>
</div>
......@@ -66,13 +58,13 @@
<div class="column text-small">
<div class="row flex-between items-center marketTagTitleBox">
<span class="marketTag-Title"><span>季节</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
<el-button color="#FFF"><span></span></el-button>
<el-button color="#FFF" class="opacity0"><span></span></el-button>
</div>
<div class="row wrap q-pt-sm">
<el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
class="text-small q-mr-md">四季</el-check-tag>
<el-check-tag :checked="queryObj.SeasonName == x.SeasonName" @change="onSeasonNameChangeHandler(x.SeasonName)"
class="text-small q-mr-md" v-for="(x,i) in seasonArr" :key="i">{{x.SeasonName}}</el-check-tag>
class="text-small">四季</el-check-tag>
<el-check-tag v-for="(x,i) in seasonArr" :checked="x.checked" @change="onSeasonNameChangeHandler(x)"
class="text-small" :key="i">{{x.SeasonName}}</el-check-tag>
</div>
</div>
</div>
......@@ -80,13 +72,12 @@
<div class="column text-small">
<div class="row flex-between items-center marketTagTitleBox">
<span class="marketTag-Title"><span>色系</span> <span class="q-ml-md text-BBC7C3">可多选</span> </span>
<el-button v-if="countriesOther.length>0" color="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
<el-button color="#fff" class="opacity0">
<span></span>
</el-button>
</div>
<div class="row wrap q-pt-sm">
<div class="row items-center wrap">
<el-tooltip
<el-tooltip
class="box-item"
effect="dark"
content="不限"
......@@ -104,13 +95,12 @@
:content="x.ColorName"
placement="bottom"
>
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x.ColorName)">
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
<span class="colorMark"
:style="{'background':x.ColorValue,'border-color':x.ColorName==queryObj.ColorName?'black':'#eee'}"></span>
:style="{'background':x.ColorValue,'border-color':x.checked?'black':'#eee'}"></span>
</div>
</el-tooltip>
</template>
</div>
</div>
</div>
</div>
......@@ -130,30 +120,55 @@
@click="onTypeChangeHandler(item.type,1)">
{{item.typeName}}
</div>
<div class="MarketButton active active2 cursor-pointer">
<span>版面</span>
<el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon>
</div>
<el-dropdown trigger="click">
<div class="MarketButton active active2 cursor-pointer">
<span>版面</span>
<el-icon class="el-icon--right reactive" style="top: 2px;left: 5px;"><arrow-down /></el-icon>
</div>
<template #dropdown>
<div class="row wrap q-pt-lg q-ml-lg q-mb-lg marketTagDown marketTagDown">
<div class="MarketButton cursor-pointer"
:class="[queryObj.TempType == x.Id?'active':'']" v-for="(x,index) in layouts" :key="index"
@click="SwitchingVersion(x)">
{{x.Name}}
</div>
</div>
<!-- <div class="row wrap q-pt-lg marketTagDown marketTagDown">
<el-check-tag :checked="queryObj.TempType==x.Id"
@change="SwitchingVersion(x)" class="text-small"
v-for="(x,i) in layouts" :key="i">{{x.Name}}</el-check-tag>
</div> -->
</template>
</el-dropdown>
</div>
</div>
<!-- q-mt-lg row wrap -->
<div v-if="dataList.length>0" class=" rounded"
style="column-count: 6;">
<div v-if="dataList.length>0" class="columnCount5 rounded">
<template v-for="(item,index) in dataList">
<div class="MarketIndexListBox bg-white rounded"
style="grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;">
<div class="MarketIndexListBox bg-white rounded">
<div class="MarketIndexList-Hover">
<div>
<el-button class="MarketIndexButtom" type="primary"
@click="getTemplate(item)">详情</el-button>
</div>
<div class="q-mt-lg">
<el-button class="MarketIndexButtom" type="primary"
@click="goToTemplate(item)">选择该{{item.TemplateType!=2?'模版':'广告'}}</el-button>
<div class="MarketIndexButtomIcon row flex-between">
<div>
<div class="MarketOpa2"></div>
<el-icon v-if="userInfo.isTemplate==1 && model==1"
size="21px" class="cusor-pointer" @click="deleteTemplate(item)">
<Delete/>
</el-icon>
<el-icon v-if="model!=1"
size="28px" class="cusor-pointer iconfont"
:class="[item.checked?'icon-xihuan':'icon-xihuan1']" @click="BeFondOf(item)"></el-icon>
</div>
<div>
<div class="MarketOpa2"></div>
<el-icon size="16px" class="cusor-pointer iconfont icon-chakan1" @click="getTemplate(item)"></el-icon>
</div>
</div>
<div class="q-mt-lg" v-if="userInfo.isTemplate==1 && model==1">
<div class="MarketIndexButtomBox">
<el-button class="MarketIndexButtom" type="primary"
@click="deleteTemplate(item)">删除</el-button>
@click="goToTemplate(item)">
{{model==1?'编辑':'使用'}}
</el-button>
</div>
</div>
<div class="MarketIndexList-img">
......@@ -188,6 +203,44 @@
<img v-for="(x,i) in showCurrentTemplate.PageImageList" :src="x" :key="i" style="width:100%;height:auto;margin-bottom: 10px;">
</div>
</el-dialog>
<el-dialog v-model="datas.addVisible" :align-center="true" :show-close="true" :close-on-press-escape="false"
:close-on-click-modal="true" style="width: 373px;" class="small-padding">
<template #header>
<div class="text-title text-center fz16 PingFangSC">创建设计</div>
</template>
<div class="addTemplateBox fz14">
<div class="color0 q-mb-lg">推荐尺寸</div>
<div class="q-mt-xs">
<div v-for="(item,index) in RecommendedSizes">
<div class="row addTemplateBoxRec rounded6 cursor-pointer"
:class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'active':'']" @click="Recommended(item)">
<span class="color0"
:class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'color0']">{{item.Name}}</span>
<p class="q-pl-md"
:class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'colorBA']">
<span class="q-ml-xs">{{item.width}} * {{item.height}} px</span>
</p>
</div>
</div>
</div>
</div>
<div class="addTemplateBox fz14 q-mb-lg">
<div class="color0 q-mb-lg">自义定尺寸</div>
<div class="addTemplateInput q-mt-xs row items-center">
<el-input type="number" min="750" v-model="datas.CustomSize.width"
placeholder="宽" class="input-with-select" @change="setDimension"></el-input>
<span class="q-px-md">*</span>
<el-input type="number" min="383" v-model="datas.CustomSize.height"
placeholder="高" class="input-with-select" @change="setDimension"></el-input>
<span class="q-ml-md">px</span>
</div>
</div>
<div class="text-center">
<el-button class="MarketIndexButtom MarketRec" type="primary" @click="ConfirmCreation">
确认创建
</el-button>
</div>
</el-dialog>
</template>
<script setup lang="ts">
......@@ -203,6 +256,8 @@ import { createOpEditorLink, createSaleCreateLink, managerTemplateLink } from '@
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import UserCard from "@/components/User/UserCard.vue";
import { Delete } from '@element-plus/icons-vue';
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
const {
userInfo
......@@ -217,10 +272,18 @@ const seasonArr = ref([] as Array < any > ); //季节
const typeArr = ref([] as Array < any > ); //类型
const sortArr = ref([] as Array < any > ); //排序
const dataList = ref([] as Array < any > ); //模板数据列表
const layouts = ref([
{Name: '不限',Id:0},
{Name: '横版',Id:1},
{Name: '竖版',Id:2},
])
const marketRef = ref<any>()
const MenuColorVisible = ref(false)
const MenuCountryVisible = ref(false)
const CountryOtherName = ref(false)
const RecommendedSizes = ref([
{Name: '手机海报',width:750,height:1334,Id:1,checked:false},
{Name: '小红书配图',width:1242,height:1660,Id:2,checked:false},
{Name: 'PPT(16:9)',width:1920,height:1080,Id:3,checked:false},
{Name: '公众号首图',width:900,height:383,Id:4,checked:false},
])
const loading = ref(false as any)
const searchData = ref({} as any)
......@@ -231,16 +294,15 @@ const { market, ConfigId} = storeToRefs(useScreenStore())
const SalesEditorStore = useSellTemplateStore()
const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())
const personVisible = ref(false)
const format = (percentage: number) => {
return percentage == 100 ? '' : ``
}
const model = ref(2)
const showCurrentTemplate = ref<any>()
const deleteLoading = ref<any>(null)
const datas = reactive({
TemplateBoxRec: null,
TemplateRow: {},
DetailsVisible: false,
addVisible: false,
loading: false,
ColorValue: '',
scrollTop: 0,
......@@ -249,7 +311,11 @@ const datas = reactive({
{icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
{icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
{icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
]
],
CustomSize:{
width: null,
height: null,
}
})
let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1
......@@ -269,12 +335,73 @@ const queryObj = reactive({
CountryName: '', //国家名称
SeasonName: '', //季节名称
ColorName: '', //颜色名称
CountryNames: [], //国家名称
SeasonNames: [], //季节名称
ColorNames: [], //颜色名称
pageCount: 0, //总页数
TempType: 0,
TemplateType: TemplateType,//0 不限 1模版 2广告
type: 0,
sort: 0
sort: 0,//排序方式
})
//
const SwitchingVersion = (row: Object) =>{
queryObj.TempType = row.Id
search()
}
const setDimension = () => {
datas.TemplateBoxRec = null
}
const Recommended = (row:Object) => {
datas.TemplateBoxRec = row
datas.CustomSize.width = null
datas.CustomSize.height = null
}
const ConfirmCreation = () => {
if(!datas.TemplateBoxRec&&(!datas.CustomSize.width&&!datas.CustomSize.height)) {
return ElMessage.warning({
showClose: true,
message: `请选择推荐尺寸或自定义尺寸`,
})
}
if(!datas.TemplateBoxRec&&(!datas.CustomSize.width||!datas.CustomSize.height)){
if(!datas.width){
return ElMessage.warning({
showClose: true,
message: `请输入自定义宽`,
})
}
if(!datas.height){
return ElMessage.warning({
showClose: true,
message: `请输入自定义高`,
})
}
}
datas.addVisible = false
if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
if(datas.TemplateBoxRec.Id==3) {
datas.TemplateBoxRec = null
addTemplate(1)
}else {
datas.TemplateBoxRec = null
addTemplate(2)
}
}else{
VIEWPORT_SIZE.value = datas.CustomSize.width
VIEWPORT_VER_SIZE.value = datas.CustomSize.height
datas.CustomSize.width = null
datas.CustomSize.height = null
addTemplate(2)
}
}
// 喜欢、不喜欢接口调用
const BeFondOf = (row: Object) => {
row.checked = !row.checked
}
const addTemplate = (type:number) =>{
// searchData.value.TemplateType = type
// marketStore.setMarket(!market)
......@@ -361,6 +488,10 @@ const goToTemplate = (item: any) => {
}
}
const search = () => {
queryObj.pageIndex = 1
queryTemplateBySearchHandler()
}
/***
* 获取模板市场分页列表
*/
......@@ -372,6 +503,12 @@ const queryTemplateBySearchHandler = async () => {
if(queryObj.pageIndex == 1) dataList.value =[]
let pageRes = await ConfigService.GetTemplagePageAsync(queryObj);
if (pageRes.data.resultCode == 1) {
let arrList = function(list){
list.forEach(x=>{
x.checked = false
})
}
arrList(pageRes.data.data.pageData)
dataList.value = dataList.value.concat(pageRes.data.data.pageData);
queryObj.pageCount = pageRes.data.data.pageCount;
}
......@@ -384,23 +521,65 @@ const queryTemplateBySearchHandler = async () => {
//线路切换
const onLineChangeHandler = (lineId: number) => {
queryObj.LineId = lineId;
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
search()
}
//国家切换
const onCountryNameChangeHandler = (CountryName: string,type:Number) => {
if(type) CountryOtherName.value = true
else CountryOtherName.value = false
queryObj.CountryName = CountryName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
const onCountryNameChangeHandler = (row: Object) => {
if(row=='') {
queryObj.CountryName = ''
queryObj.CountryNames = []
countriesOther.value.forEach(x=>{
x.checked = false
})
countries.value.forEach(x=>{
x.checked = false
})
}else{
queryObj.CountryName = row.CountryName;
if(!row.checked) {
row.checked = true
queryObj.CountryNames.push(row.CountryName)
}else{
row.checked = false
let list = queryObj.CountryNames.filter(x=>{
if(x!=row.CountryName) return x
})
queryObj.CountryNames = list
if(queryObj.CountryNames.length==0) queryObj.CountryName = ''
}
}
search()
}
//季节切换
const onSeasonNameChangeHandler = (SeasonName: string) => {
queryObj.SeasonName = SeasonName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
const onSeasonNameChangeHandler = (row: Object) => {
if(row=='') {
queryObj.SeasonName = ''
queryObj.SeasonNames = []
seasonArr.value.forEach(x=>{
x.checked = false
})
}else{
queryObj.SeasonName = row.SeasonName;
if(!row.checked) {
row.checked = true
queryObj.SeasonNames.push(row.SeasonName)
// if(queryObj.SeasonNames.length==4) {
// queryObj.SeasonName = ''
// seasonArr.value.forEach(x=>{
// x.checked = false
// })
// }
}else{
row.checked = false
let list = queryObj.SeasonNames.filter(x=>{
if(x!=row.SeasonName) return x
})
queryObj.SeasonNames = list
if(queryObj.SeasonNames.length==0) queryObj.SeasonName = ''
}
}
search()
}
//类型切换
......@@ -412,18 +591,32 @@ const onTypeChangeHandler = (Type: string,num: Number) => {
queryObj.TemplateType = Type;
}
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
search()
}
//颜色切换
const onColorNameChangeHandler = (ColorName: string,ColorValue: String) => {
MenuColorVisible.value = false
if(ColorValue) datas.ColorValue = ColorValue
else datas.ColorValue = ''
queryObj.ColorName = ColorName;
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
const onColorNameChangeHandler = (row: Object) => {
if(row=='') {
queryObj.ColorName = ''
queryObj.ColorNames = []
colorArr.value.forEach(x=>{
x.checked = false
})
}else{
queryObj.ColorName = row.ColorName;
if(!row.checked) {
row.checked = true
queryObj.ColorNames.push(row.ColorName)
}else{
row.checked = false
let list = queryObj.ColorNames.filter(x=>{
if(x!=row.ColorName) return x
})
queryObj.ColorNames = list
if(queryObj.ColorNames.length==0) queryObj.ColorName = ''
}
}
search()
}
/**
......@@ -448,8 +641,14 @@ const getTemplateQuery = async () => {
let res = await ConfigService.GetTemplateQueryAsync();
if (res.data.resultCode == 1) {
var tempData = res.data.data;
let arrList = function(list) {
list.forEach(x => {
x.checked = false
});
}
//国家
if (tempData && tempData.CountryList) {
arrList(tempData.CountryList)
countriesOther.value = tempData.CountryList.filter((x,index)=>{
if(model.value==1){ return index>=12 }
else return index>=13
......@@ -461,17 +660,40 @@ const getTemplateQuery = async () => {
}
//颜色
if (tempData && tempData.ColorList) {
colorArrOther.value = tempData.ColorList.filter((x,index)=>{
if(model.value==1){ return index>=15 }
else return index>=14
})
colorArr.value = tempData.ColorList.filter((x,index)=>{
if(model.value==1){ return index<14 }
else return index<14
})
let ColorList = [
{ColorName:'红',ColorValue:'#E43939',Id:1},
{ColorName:'橙',ColorValue:'#F79A2C',Id:2},
{ColorName:'黄',ColorValue:'#FFF60B',Id:3},
{ColorName:'绿',ColorValue:'#3DD948',Id:4},
{ColorName:'青',ColorValue:'#39CAE4',Id:5},
{ColorName:'蓝',ColorValue:'#2C31F1',Id:6},
{ColorName:'紫',ColorValue:'#7A39E4',Id:7},
{ColorName:'玫红',ColorValue:'#E65FC1',Id:8},
{ColorName:'棕色',ColorValue:'#D0B478',Id:9},
{ColorName:'白',ColorValue:'#FFFFFF',Id:10},
{ColorName:'黑',ColorValue:'#000000',Id:11},
{ColorName:'灰',ColorValue:'#BABABA',Id:12},
]
for(let i=0;i<ColorList.length;i++){
colorArr.value.push({
ColorName: ColorList[i].ColorName,
ColorValue: ColorList[i].ColorValue,
checked: false,
})
}
// arrList(tempData.ColorList)
// colorArrOther.value = tempData.ColorList.filter((x,index)=>{
// if(model.value==1){ return index>=15 }
// else return index>=14
// })
// colorArr.value = tempData.ColorList.filter((x,index)=>{
// if(model.value==1){ return index<14 }
// else return index<14
// })
}
//季节
if (tempData && tempData.SeasonList) {
arrList(tempData.SeasonList)
seasonArr.value = tempData.SeasonList;
}
//类型
......@@ -526,6 +748,43 @@ onMounted(()=>{
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
font-display: swap;
}
.addTemplateInput {
::v-deep(.el-input__wrapper){
background-color: #EFEFEF;
box-shadow: 0 0 0
}
}
.MarketRec{
margin-top: 23px;
margin-bottom: 24px;
}
.addTemplateBoxRec.active{
background: #FF674D;
}
.addTemplateBoxRec{
line-height: 36px;
background: #EFEFEF;
padding: 0 15px;
margin-bottom: 17px;
}
.addTemplateBox{
padding: 0 41px;
}
.el-button:not(.is-link),.el-menu-item,
.el-button:not(.is-link):hover,.el-menu-item:hover{
border: 0;
}
.marketTagDown .el-check-tag{
line-height: 22px;
margin-left: 13px;
margin-right: 0;
}
.marketTagDown {
width: 409px;
}
.marketTagDown.marketTagDown{
width: 309px;
}
.MarketButton.active.active2{
margin-right: 0;
}
......@@ -566,9 +825,10 @@ onMounted(()=>{
/* background: #fff; */
}
.marketTag-color{
margin-top: 5px;
margin-bottom: 13px;
margin-right: 47px;
margin-left: 15px;
margin-right: 31px;
text-align: center;
}
.marketTagTitleBox{
padding-right: 30px;
......@@ -663,18 +923,18 @@ onMounted(()=>{
z-index: 1;
}
.Market-from{
/* background: #f3f6fb; */
background: linear-gradient(0deg, #FFF, #E3ECFF);
height:100vh;
height: 100vh;
overflow: auto;
}
.marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
padding: 0;
}
.marketTag{
padding: 20px 0 20px 32px;
padding: 20px 0px 0 30px;
width: 460px;
height: 245px;
overflow: hidden;
/* height: 245px; */
}
.marketTag+.marketTag{
margin-left: 32px;
......@@ -723,7 +983,7 @@ onMounted(()=>{
.el-check-tag {
width: 86px;
height: 36px;
margin-right: 13px;
margin-right: 14px;
margin-bottom: 18px;
line-height: 36px;
border-radius: 6px;
......@@ -739,6 +999,9 @@ onMounted(()=>{
position: relative;
overflow: hidden;
box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
grid-row-start: auto;margin-bottom: 20px;break-inside: avoid;
max-height: 362px;
min-height: 173px;
}
.MarketIndexList{
width: 100%;
......@@ -774,16 +1037,14 @@ onMounted(()=>{
top: -5px;
}
.MarketIndexListBox:hover .MarketIndexList{
}
.MarketIndexList-img{
width: 100%;
/* height: 0;
position: relative;
padding-bottom: 56.25%;
overflow: hidden; */
border-radius: 4px;
border-radius: 6px;
}
.MarketIndexList-img img{
/* position: absolute;
......@@ -814,7 +1075,57 @@ onMounted(()=>{
}
.MarketIndexButtom{
color: #ffff;
width: 92px;
width: 86px;
height: 36px;
letter-spacing: 1px;
font-size: 14px !important;
border-radius: 6px;
}
.MarketIndexButtomIcon>div .el-icon.icon-xihuan{
color: #FF674D !important;
}
.MarketIndexButtomIcon>div .el-icon{
width: 36px;
height: 36px;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
line-height: 36px;
color: #B9B9B9;
}
.MarketIndexButtomIcon>div:hover .el-icon{
color: #fff;
}
.MarketIndexButtomIcon>div:hover .MarketOpa2{
opacity: 0.22;
}
.MarketIndexButtomIcon>div{
position: relative;
width: 36px;
height: 36px;
}
.MarketOpa2{
width: 36px;
height: 36px;
background: #FFFFFF;
border-radius: 6px;
opacity: 0;
}
.MarketIndexButtomIcon{
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 14px 16px;
}
.MarketIndexButtomBox{
position: absolute;
left: 0;
right: 0;
bottom: 15px;
text-align: center;
}
.layout-item{
width: 180px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment