Skip to content

P
pptist
Commit 84d3d42c authored by zhengke's avatar zhengke
Browse files
Options

首页 调整

parent c7eaaa06
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 34 deletions
src/views/Editor/Toolbar/ElementTemplateData.vue
View file @ 84d3d42c
......@@ -53,19 +53,21 @@
/>
</el-select>
</div>
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择线路：</p>
<div class="row wrap q-mt-md">
<el-select v-model="queryObj.LineId" class="m-2"
filterable placeholder="请选择线路"
@change="onLineChangeHandler(1)">
<el-option
v-for="item in lines"
:key="item.LineID"
:label="item.LineName"
:value="item.LineID"
/>
</el-select>
</div>
<template v-if="false">
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择线路：</p>
<div class="row wrap q-mt-md">
<el-select v-model="queryObj.LineId" class="m-2"
filterable placeholder="请选择线路"
@change="onLineChangeHandler(1)">
<el-option
v-for="item in lines"
:key="item.LineID"
:label="item.LineName"
:value="item.LineID"
/>
</el-select>
</div>
<template v-if="Series.length>0">
<p class="q-mt-md"><span class="Required q-mr-md"></span>选择系列：</p>
<div class="row wrap q-mt-md">
......@@ -80,6 +82,7 @@
</el-select>
</div>
</template>
</template>
<p class="q-mt-md"><span class="Required q-mr-md"></span>标签：</p>
<div class="row wrap q-mt-md">
<el-tag
......@@ -104,21 +107,54 @@
+ 添加标签
</el-button>
</div>
<p class="q-mt-md"><span class="Required q-mr-md"></span>选择颜色：</p>
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择颜色：</p>
<div class="row q-mt-md">
<el-select v-model="queryObj.ColorStr" placeholder="请选择颜色"
@change="setCountryValue">
<el-select v-model="queryObj.ColorId" placeholder="请选择主色">
<el-option
key=""
label="不限"
value=""
/>
<el-option
v-for="item in ColorList"
:key="item.Id"
:label="`${item.Name}`"
:value="item.Id"
/>
</el-select>
</div>
<div class="row q-mt-md">
<el-select v-model="queryObj.ColorStr" placeholder="请选择颜色"
@change="setCountryValue">
<!-- <el-option
key=""
label="不限"
value=""
/> -->
<el-option
v-for="item in dispositionObj.ColorList"
:key="item.ColorValue"
:label="`${item.ColorName} / ${item.ColorValue}`"
:value="item.ColorValue"
/>
>
<template #default>
<!-- <el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark">
{{ item.label }}
</el-tag> -->
<el-tag
:color="item.ColorValue"
effect="dark" class="q-mr-md">
{{ item.label }}
</el-tag>
<span :style="{'color':item.ColorValue}">{{item.ColorName}}</span>
<span class="q-ml-md">{{item.ColorValue}}</span>
</template>
</el-option>
</el-select>
<el-button v-if="!datas.addColorsShow" class="button-new-tag q-ml-md ml-1"
@click="datas.addColorsShow=!datas.addColorsShow">
......@@ -230,6 +266,17 @@
searchData.value = inject(injectKeyTemplate)
const lines = ref([] as Array < any > ) //线路
const Series = ref([] as Array < any > ) //系列
const ColorList = [
{Name:'红',Id:1},
{Name:'橙',Id:2},
{Name:'黄',Id:3},
{Name:'绿',Id:4},
{Name:'青',Id:5},
{Name:'蓝',Id:6},
{Name:'紫',Id:7},
{Name:'黑',Id:8},
{Name:'白',Id:9},
]
const cursors = [] as Array<any>
......
src/views/Editor/index.vue
View file @ 84d3d42c
......@@ -124,6 +124,7 @@ const datas = reactive({
TemplateType: TemplatesType,// 1行程模版 2广告模版
Width: 0,
Height: 0,
ColorId: '',
}
},
......
src/views/Market/Index.vue
View file @ 84d3d42c
......@@ -103,7 +103,7 @@
<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">
<el-button color="#EFEFEF" @click="MenuCountryVisible=!MenuCountryVisible">
<span>更多</span> <el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
</div>
......@@ -154,7 +154,9 @@
<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 v-if="countriesOther.length>0" 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">
<div class="row items-center wrap">
......@@ -163,9 +165,10 @@
effect="dark"
content="不限"
placement="bottom">
<div class="marketTag-color text-small pointer" @change="onColorNameChangeHandler('')">
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler('')">
<span class="colorMark"
:style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)','border-color':queryObj.ColorName==''?'black':'#eee'}"></span>
:style="{'background': 'conic-gradient(from 90deg at 51.03303% 50.931181%, #E43939, #F79A2C, #FFF60B, #39CAE4, #7A39E4)',
'border-color':queryObj.ColorName==''?'black':'#eee'}"></span>
</div>
</el-tooltip>
<template v-for="(x,i) in colorArr" :key="i">
......@@ -187,6 +190,26 @@
</div>
</div>
<div style="margin-top: 20px;">
<div class="MarketType row flex-between">
<div class="row">
<div class="MarketButton cursor-pointer"
:class="[queryObj.TemplateType == item.type?'active':'']" v-for="(item,index) in typeArr" :key="index"
@click="onTypeChangeHandler(item.type)">
{{item.typeName}}
</div>
</div>
<div class="row">
<div class="MarketButton cursor-pointer"
:class="[queryObj.sort == item.type?'active':'']" v-for="(item,index) in sortArr" :key="index"
@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>
</div>
</div>
<!-- q-mt-lg row wrap -->
<div v-if="dataList.length>0" class=" rounded"
style="column-count: 6;">
......@@ -210,11 +233,11 @@
<div class="MarketIndexList-img">
<img :src="item.CoverImg" class="rounded" />
</div>
<div class="MarketIndexList-text row items-center">
<!-- <div class="MarketIndexList-text row items-center">
<el-tag class="mx-1 q-mr-md" effect="dark" v-if="item.TemplateType==2"
size="small">广告</el-tag>
<span>{{item.Title}}</span>
</div>
</div> -->
</div>
</template>
......@@ -266,6 +289,7 @@ const colorArrOther = ref([] as Array < any > ); //颜色
const colorArr = ref([] as Array < any > ); //颜色
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 marketRef = ref<any>()
const MenuColorVisible = ref(false)
......@@ -323,6 +347,7 @@ const queryObj = reactive({
TempType: 0,
TemplateType: TemplateType,//0 不限 1模版 2广告
type: 0,
sort: 0
})
const addTemplate = (type:number) =>{
// searchData.value.TemplateType = type
......@@ -453,9 +478,14 @@ const onSeasonNameChangeHandler = (SeasonName: string) => {
}
//类型切换
const onTypeChangeHandler = (Type: string) => {
searchData.value.MarketTemplateType = Type
queryObj.TemplateType = Type;
const onTypeChangeHandler = (Type: string,num: Number) => {
if(num){
queryObj.sort = Type;
}else{
searchData.value.MarketTemplateType = Type
queryObj.TemplateType = Type;
}
queryObj.pageIndex = 1
queryTemplateBySearchHandler();
}
......@@ -507,11 +537,11 @@ const getTemplateQuery = async () => {
if (tempData && tempData.ColorList) {
colorArrOther.value = tempData.ColorList.filter((x,index)=>{
if(model.value==1){ return index>=15 }
else return index>=7
else return index>=14
})
colorArr.value = tempData.ColorList.filter((x,index)=>{
if(model.value==1){ return index<15 }
else return index<15
if(model.value==1){ return index<14 }
else return index<14
})
}
//季节
......@@ -519,10 +549,21 @@ const getTemplateQuery = async () => {
seasonArr.value = tempData.SeasonList;
}
//类型
for(let i=1;i<3;i++){
for(let i=0;i<3;i++){
let text = '所有模版'
if(i==1) text = '行程'
if(i==2) text = '广告'
typeArr.value.push({
type:i,
typeName:i==1?'模版':'广告'
typeName:text
})
}
for(let i=0;i<2;i++){
let text = '综合排序'
if(i==1) text = '最新模板'
sortArr.value.push({
type:i,
typeName:text
})
}
}
......@@ -559,6 +600,45 @@ onMounted(()=>{
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
font-display: swap;
}
.MarketButton.active.active2{
margin-right: 0;
}
.MarketButton.active.active2::after{
background: none;
}
.MarketButton{
width: 90px;
height: 36px;
line-height: 36px;
font-size: 14px;
text-align: center;
color: #9EA2B3;
position: relative;
margin-right: 13px;
}
.MarketButton.active{
background: #F4F7FE;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
color: #1C1C1C;
}
.MarketButton.active::after{
content: "";
position: absolute;
left: 35.5px;
bottom: 0;
width: 19px;
height: 4px;
background: linear-gradient(134deg, #649DED, #570AD8);
}
.MarketType{
margin-top: 29px;
margin-bottom: 33px;
/* background: #fff; */
}
.marketTag-color{
margin-top: 5px;
margin-bottom: 13px;
......@@ -797,9 +877,9 @@ onMounted(()=>{
border-radius: 8px;
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
font-size: 14px !important;
color: #FFFFFF;
line-height: 32px;
line-height: 36px;
text-align: center;
}
.Market-fromBj{
......@@ -885,7 +965,7 @@ onMounted(()=>{
.MarketIndexListBox{
/* width:calc(20% - 10px); */
/* margin: 10px 10px 0 0; */
padding:5px;
/* padding:5px; */
position: relative;
overflow: hidden;
box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important;
......
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