Skip to content

P
pptist
Commit 8388b584 authored by zhengke's avatar zhengke
Browse files
Options

首页样式调整

parent 985308a8
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 213 deletions
src/assets/styles/common.css
View file @ 8388b584
......@@ -84,6 +84,9 @@ page {
.text-5B5D62{
color: #5B5D62;
}
.text-BBC7C3{
color: #BBC7C3;
}
.bg-default{
background-color: #F7F8FA;
}
......
src/views/Market/Index.vue
View file @ 8388b584
......@@ -2,38 +2,32 @@
<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="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;" />
<!-- <el-input v-model="queryObj.Title" placeholder="输入模板关键字快速查找"
class="input-with-select q-pr-33">
<template #append>
<el-button type="primary" @click="queryObj.pageIndex=1,queryTemplateBySearchHandler()">搜索</el-button>
</template>
</el-input> -->
<div class="row grow Market-select reactive">
<el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33">
<template #append>
<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()"/>
</div>
</template>
</el-input>
</div>
<div class="shrink row items-center" style="text-align: right;">
<div>
<div class="MarketAdd pointer" @click="addTemplate">创建</div>
<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;" />
<div class="row grow Market-select reactive">
<el-input v-model="queryObj.Title" placeholder="请输入关键字" class="input-with-select q-pr-33">
<template #append>
<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()"/>
</div>
</template>
</el-input>
</div>
<div class="MarketPopover">
<el-dropdown class="q-pl-md" trigger="click" >
<div class="shrink row items-center" style="text-align: right;">
<div>
<div class="MarketAdd pointer" @click="addTemplate(1)">创建</div>
</div>
<el-dropdown trigger="click">
<div class="Marketfigure pointer">
<img class="reactive" src="../../assets/img/figure.png"/>
</div>
<template #dropdown>
<div class="MarketfigurePopover">
<div class="MarketfigurePopover shrink">
<div class="row">
<div class="MarketfigureMin pointer">
<div class="MarketfigureMin pointer shrink">
<img class="reactive" src="../../assets/img/figure.png"/>
</div>
<div>
......@@ -87,140 +81,93 @@
</div>
</template>
</el-dropdown>
<!--
<Popover trigger="click" placement="bottom-start"
v-model:value="personVisible" center
:popper-style="{ 'border-radius': '8px' }">
<template #content>
<div class="MarketfigurePopover">
<div class="row">
<div class="MarketfigureMin pointer">
<img class="reactive" src="../../assets/img/figure.png"/>
</div>
<div>
<div class="row items-center MarketfigureName">
<span>Ranjunjun</span>
<img src="../../assets/img/homeVip1.png" width="65" height="16"/>
</div>
<div class="row MarketfigurePhon">
<span>ID：123453789</span>
<span>电话：180****1613</span>
</div>
</div>
</div>
<div class="MarketEquity">
<div class="MarketEquityNum">
<span>功能权益</span>
<span>5+</span>
</div>
<div class="MarketEquityTime">有效期至2024.07.03</div>
</div>
<div class="MarketCapacity">
<div>
<el-progress :percentage="100" color="#0A5EF9" :stroke-width="8" text-inside
:format="format">
</el-progress>
</div>
<div class="MarketCapacityNum row flex-between">
<span>7.88 GB / 1.34 TB</span>
<span>容量管理</span>
</div>
</div>
<div class="MarketFootmark row items-center flex-between">
<div>
<span>足迹</span>
<b>10</b>
</div>
<div>
<span>收藏</span>
<b>10</b>
</div>
<el-dropdown trigger="click">
<el-icon class="pointer" size="21" color="#070707"><MoreFilled /></el-icon>
<template #dropdown>
<div class="MarketPopoverMore row wrap pointer">
<div class="column" v-for="(item,index) in datas.moreList">
<div>
<span>共享</span>
<b>10</b>
<img :src="item.icon" width="34" height="34"/>
</div>
</div>
<div class="TranLine"></div>
<div class="MarketSettings row flex-between">
<span>账号设置</span>
<span class="pointer">退出登录</span>
<span>{{item.Name}}</span>
</div>
</div>
</template>
<div class="Marketfigure pointer">
<img class="reactive" src="../../assets/img/figure.png"/>
</div>
</Popover> -->
</el-dropdown>
</div>
<el-icon class="pointer" size="26" color="#070707"><MoreFilled /></el-icon>
</div>
</div>
<div class="q-mt-lg bg-white rounded text-nowrap marketTag" style="padding: 20px 20px 0 20px;">
<div class="row text-small items-center nowrap">
<span style="margin-right: 30px;">适用线路：</span>
<div class="row wrap">
<el-check-tag :checked="queryObj.LineId == 0" @change="onLineChangeHandler(0)"
class="text-small q-mr-md">全部</el-check-tag>
<el-check-tag :checked="queryObj.LineId == x.LineID" @change="onLineChangeHandler(x.LineID)"
class="text-small q-mr-md" v-for="x in lines" :key="x.LineID">{{x.LineName}}</el-check-tag>
<div class="marketTag-from row">
<div class="bg-white rounded text-nowrap marketTag">
<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">
<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"
v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag>
</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>
</div>
</div>
</div>
<el-divider style="margin:12px 0;border-top-color:#f3f6fb;"></el-divider>
<div class="row wrap items-center q-pb-md">
<div class="q-pb-md">
<div class="row text-small items-center wrap">
<span style="margin-right: 30px;">适用国家：</span>
<el-check-tag :checked="queryObj.CountryName == ''" @change="onCountryNameChangeHandler('')"
class="text-small q-mr-md">通用</el-check-tag>
<el-check-tag :checked="queryObj.CountryName == x.CountryName"
@change="onCountryNameChangeHandler(x.CountryName)" class="text-small q-mr-md"
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"
v-for="(x,i) in countriesOther" :key="i">{{x.CountryName}}</el-check-tag>
</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>
<div class="bg-white rounded text-nowrap marketTag">
<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>
</div>
</div>
<div class="q-pb-md">
<div class="MarketVerticalLine">&nbsp;</div>
</div>
<div class="q-pb-md">
<div class="row text-small items-center wrap">
<span style="margin-right: 30px;">季节：</span>
<div class="row wrap q-pt-sm">
<el-check-tag :checked="queryObj.SeasonName == ''" @change="onSeasonNameChangeHandler('')"
class="text-small q-mr-md">通用</el-check-tag>
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 q-mr-md" v-for="(x,i) in seasonArr" :key="i">{{x.SeasonName}}</el-check-tag>
</div>
</div>
<div class="q-pb-md">
<div class="MarketVerticalLine">&nbsp;</div>
</div>
<div class="q-pb-md">
<div class="row text-small items-center nowrap">
<span style="margin-right: 30px;">颜色：</span>
<el-check-tag :checked="queryObj.ColorName == ''" @change="onColorNameChangeHandler('')"
class="text-small q-mr-md">通用</el-check-tag>
<div class="row items-center nowrap">
</div>
<div class="bg-white rounded text-nowrap marketTag">
<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>
</div>
<div class="row wrap q-pt-sm">
<div class="row items-center wrap">
<el-tooltip
class="box-item"
effect="dark"
content="不限"
placement="bottom">
<div class="marketTag-color text-small pointer" @change="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>
</div>
</el-tooltip>
<template v-for="(x,i) in colorArr" :key="i">
<el-tooltip
class="box-item"
......@@ -228,70 +175,15 @@
:content="x.ColorName"
placement="bottom"
>
<div class="text-small q-mr-md q-ml-sm pointer" @click="onColorNameChangeHandler(x.ColorName)">
<div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x.ColorName)">
<span class="colorMark"
:style="{'background':x.ColorValue,'border-color':x.ColorName==queryObj.ColorName?'black':'#eee'}"></span>
</div>
</el-tooltip>
</template>
</div>
<Popover v-if="colorArrOther.length>0" trigger="click" placement="bottom-start" v-model:value="MenuColorVisible">
<template #content>
<div class="row wrap" style="max-width: 500px;max-height: 300px;overflow: auto;padding: 25px 0;">
<template v-for="(x,i) in colorArrOther" :key="i">
<div class="text-small pointer q-mr-md"
@click="onColorNameChangeHandler(x.ColorName,x.ColorValue)">
<div class="colorMark reactive"
:style="{'background':x.ColorValue,'border-color':x.ColorName==queryObj.ColorName?'black':'#eee'}">
<div class="absolute ColorNameBox">
<span class="ColorName" style="white-space: nowrap;">{{x.ColorName}}</span>
<span class="ColorNameBJ"></span>
</div>
</div>
</div>
</template>
</div>
</template>
<div class="row items-center">
<div v-if="datas.ColorValue">
<el-tooltip
class="box-item"
effect="dark"
:content="queryObj.ColorName"
placement="bottom"
>
<span class="colorMark"
:style="{'background':datas.ColorValue,'border-color':queryObj.ColorName?'black':'#eee'}"></span>
</el-tooltip>
</div>
<el-check-tag :checked="datas.ColorValue!=''"
class="text-small q-mr-md q-ml-sm">
<el-icon class="pointer" v-if="!MenuColorVisible">
<ArrowDownBold @click="MenuColorVisible = false"/>
</el-icon>
<el-icon class="pointer" v-else>
<ArrowUpBold @click="MenuColorVisible = true"/>
</el-icon>
</el-check-tag>
</div>
</Popover>
</div>
</div>
<template v-if="TemplateType==0">
<div class="q-pb-md">
<div class="MarketVerticalLine">&nbsp;</div>
</div>
<div class="q-pb-md" v-if="true">
<div class="row text-small items-center wrap">
<span style="margin-right: 30px;">类型：</span>
<el-check-tag :checked="queryObj.TemplateType == 0" @change="onTypeChangeHandler('')"
class="text-small q-mr-md">不限</el-check-tag>
<el-check-tag :checked="queryObj.TemplateType == x.type" @change="onTypeChangeHandler(x.type)"
class="text-small q-mr-md" v-for="(x,i) in typeArr" :key="i">{{x.typeName}}</el-check-tag>
</div>
</div>
</template>
</div>
</div>
<div style="margin-top: 20px;">
......@@ -401,6 +293,13 @@ const datas = reactive({
DetailsVisible: false,
loading: false,
ColorValue: '',
scrollTop: 0,
moreList:[
{icon: require("@/assets/img/homeMore0.png"),Name:'添加到桌面'},
{icon: require("@/assets/img/homeMore1.png"),Name:'关注公众号'},
{icon: require("@/assets/img/homeMore2.png"),Name:'我的订单'},
{icon: require("@/assets/img/homeMore3.png"),Name:'意见反馈'},
]
})
let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1
......@@ -596,23 +495,24 @@ const getTemplateQuery = async () => {
//国家
if (tempData && tempData.CountryList) {
countriesOther.value = tempData.CountryList.filter((x,index)=>{
if(model.value==1){ return index>=3 }
else return index>=4
if(model.value==1){ return index>=12 }
else return index>=13
})
countries.value = tempData.CountryList.filter((x,index)=>{
if(model.value==1) {return index<3}
else return index<4
if(model.value==1) {return index<12}
else return index<13
})
}
//颜色
if (tempData && tempData.ColorList) {
console.log(tempData.ColorList.length,'----')
colorArrOther.value = tempData.ColorList.filter((x,index)=>{
if(model.value==1){ return index>=3 }
if(model.value==1){ return index>=15 }
else return index>=7
})
colorArr.value = tempData.ColorList.filter((x,index)=>{
if(model.value==1){ return index<3 }
else return index<7
if(model.value==1){ return index<15 }
else return index<15
})
}
//季节
......@@ -639,6 +539,7 @@ const scrollingHandler = () =>{
queryObj.pageIndex++
queryTemplateBySearchHandler()
}
datas.scrollTop = scrollTop
}
}
......@@ -659,9 +560,78 @@ onMounted(()=>{
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
font-display: swap;
}
.MarketPopover ::v-deep(.popover-content){
.marketTag-color{
margin-top: 5px;
margin-bottom: 23px;
margin-right: 47px;
}
.marketTagTitleBox{
padding-right: 30px;
}
.marketTag-Title span:first-child{
font-weight: bold;
color: #1C1C1C;
}
.marketTag-Title{
font-family: PingFang SC;
font-size: 14px;
}
.marketTag-from{
margin-top: 38px;
}
.MarketPopoverMore>div span{
text-align: right;
padding-right: 17px;
font-family: PingFang SC;
font-weight: 400;
font-size: 14px;
color: #000000;
}
.MarketPopoverMore>div div{
padding: 20px 0 22px 20px;
}
.MarketPopoverMore>div:first-child,.MarketPopoverMore>div:nth-child(2){
margin-bottom: 25px;
}
.MarketPopoverMore>div:nth-child(2n){
margin-left: 28px;
}
.MarketPopoverMore>div{
width: 140px;
height: 105px;
border-radius: 8px;
background: #F3F6FB;
}
.MarketPopoverMore{
width: 368px;
padding: 30px;
}
.MarketHeader>div{
padding: 10px 22px;
max-width:1440px;
margin:0 auto;
}
.MarketHeader{
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 2;
background: #E3ECFF;
animation:myHeader 1s;
-webkit-animation:myHeader 1s;
}
@keyframes myHeader
{
from {top: -100px;}
to {top: 0px;}
}
@-webkit-keyframes myHeader
{
from {top: -100px;}
to {top: 0px;}
}
.MarketSettings span:last-child{
font-weight: 400;
color: #B4B4B4;
......@@ -669,6 +639,7 @@ onMounted(()=>{
.MarketSettings span:first-child{
font-weight: 500;
color: #000000;
padding: 10px 0 20px 0;
}
.MarketSettings span{
font-family: PingFang SC;
......@@ -765,7 +736,8 @@ onMounted(()=>{
overflow: hidden;
}
.MarketfigurePopover{
padding: 14px 20px 0 20px;
width: 380px;
padding: 24px 30px 0 30px;
}
.Marketfigure:hover img{
animation:myfirst 1s;
......@@ -848,7 +820,15 @@ onMounted(()=>{
overflow: auto;
}
.marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
padding: 5px 8px;
padding: 0;
}
.marketTag{
padding: 20px 0 20px 32px;
width: 460px;
height: 245px;
}
.marketTag+.marketTag{
margin-left: 32px;
}
.colorMark:hover .ColorNameBox {
display: block;
......@@ -887,11 +867,21 @@ onMounted(()=>{
.aliMarketfont {
font-family: aliMarketfont;
}
.el-check-tag.is-checked{
background: #000;
color: #fff;
}
.el-check-tag {
width: 86px;
height: 36px;
margin-right: 18px;
margin-bottom: 18px;
line-height: 36px;
border-radius: 6px;
text-align: center;
background: #FFF;
font-weight: 500 !important;
font-size: 12px !important;
font-weight: 400 !important;
font-size: 14px !important;
}
.MarketIndexListBox{
/* width:calc(20% - 10px); */
......
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