<template>
    <div ref="marketRef" class="Market-from">
        <div class="Market-fromBj"></div>
        <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/1713237911000_1.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="search"/>
                                </div>
                            </template>
                        </el-input>
                    </div>
                    <div class="row items-center" style="text-align: right;">
                        <!-- <div v-if="model==1" >
                            <div class="MarketAdd pointer">创建</div>
                        </div> -->
                       <UserCard></UserCard>
                    </div>
                </div>
            </div>
            <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-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>
                            </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.CountryList.length==0" @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>
                <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" class="opacity0"><span></span></el-button>
                        </div>
                        <div class="row wrap q-pt-sm">
                            <el-check-tag :checked="queryObj.SeasonList.length==0" @change="onSeasonNameChangeHandler('')"
                                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>
                <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-dropdown v-if="colorArrOther.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">
                                        <template v-for="(x,i) in colorArrOther" :key="i">
                                            <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                :content="x.ColorName"
                                                placement="bottom"
                                            >
                                                <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
                                                    <span class="colorMark"
                                                    :style="{'background':x.ColorValue,'border-color':x.checked?'black':'#eee'}"></span>
                                                </div>
                                            </el-tooltip>
                                        </template>
                                    </div>
                                </template>
                            </el-dropdown>
                            <el-button v-else color="#FFF" class="opacity0">
                                <span></span>
                            </el-button>
                        </div>
                        <div class="row wrap q-pt-sm">
                            <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="不限"
                                    placement="bottom">
                                    <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.ColorList.length==0?'black':'#eee'}"></span>
                                    </div>
                                </el-tooltip>
                                <template v-for="(x,i) in ColorList" :key="i">
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        :content="x.Name"
                                        placement="bottom"
                                    >
                                        <div class="marketTag-color text-small pointer" @click="onColorNameChangeHandler(x)">
                                            <span class="colorMark"
                                            :style="{'background':x.Content,'border-color':x.checked?'black':'#eee'}"></span>
                                        </div>
                                    </el-tooltip>
                                </template>
                        </div>
                    </div>
                </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>
                        <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>
                            </template>
                        </el-dropdown>
                        
                    </div>
                </div>
                <!-- q-mt-lg row wrap -->
                <div v-if="dataList.length>0" class="columnCount5 rounded">
                    <template v-for="(item,index) in dataList">
                        <div class="MarketIndexListBox bg-white rounded">
                            <div class="MarketIndexList-Hover">
                                <div class="MarketIndexButtomIcon row flex-between">
                                    <div>
                                        <div class="MarketOpa2"></div>
                                        <el-icon v-if="userInfo.isTemplate==1 && model==1"
                                        size="21px" class="MarketIconAbsolute cusor-pointer" @click="deleteTemplate(item)">
                                            <Delete/>
                                        </el-icon>
                                        <el-icon v-if="model!=1" size="23px" class="MarketIconAbsolute cusor-pointer"
                                        @click="BeFondOf(item)">
                                            <IconLike v-if="!item.checked" class="IconLike"/>
                                            <IconLike v-else class="IconLike" :theme="item.checked?'filled':''" :fill="item.checked?'#FF674D':'#B9B9B9'" />
                                        </el-icon>
                                    </div>
                                    <div>
                                        <div class="MarketOpa2"></div>
                                        <el-icon size="23px" theme="filled" class="MarketIconAbsolute cusor-pointer" @click="getTemplate(item)">
                                            <View></View>
                                        </el-icon>
                                    </div>
                                </div>
                                <div class="MarketIndexButtomBox">
                                    <el-button class="MarketIndexButtom" type="primary"
                                    @click="goToTemplate(item)">
                                        {{model==1?'编辑':'使用'}}
                                    </el-button>
                                </div>
                            </div>
                            <div class="MarketIndexList-img">
                                <img :src="item.CoverImg" class="rounded" />
                            </div>
                            <!-- <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>
                        
                    </template>
                </div>
                <div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
                style="padding: 30px 10px 30px 10px;">
                    <el-empty description="暂无数据" :image="noDataImg(1)" />
                </div>
                <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"><img :src="noDataImg(2)" width="118" /></div>
                <div style="height:40px;" class="q-mt-md no-bg" background="transparent" v-loading="loading"  element-loading-text="正在加载中"></div>
            </div>
        </div>
        <foote v-if="(queryObj.pageCount == queryObj.pageIndex || queryObj.pageCount==0) && !loading"></foote>
    </div>
    
    <!-- 行程、广告图详情 -->
    <temDetails :DetaTem="DetailsVisible" :Details="datas.TemDetails" @close="DetailsVisible=false"/>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted, watch} from "vue";
import LineService from '@/services/LineService'
import ConfigService from '@/services/ConfigService'
import { useUserStore } from "@/store/user";
import { useSellTemplateStore } from '@/store'
import { useScreenStore } from "@/store/screen";
import { storeToRefs } from "pinia";
import { injectKeyTemplate } from '@/types/injectKey'
import { createOpEditorLink, createSaleCreateLink, managerTemplateLink,DominantColour } from '@/utils/common'
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import UserCard from "@/components/User/UserCard.vue";
import { Delete,View } from '@element-plus/icons-vue';
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
import foote from '@/components/footer/index.vue';
import temDetails from "@/components/home/temDetails.vue";

import { noDataImg } from "@/utils/common";

const {
    userInfo
} = storeToRefs(useUserStore())
const router = useRouter();
const lines = ref([] as Array < any > ) //线路
const countriesOther = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
const countries = ref(['日本', '韩国', '老挝', '法国', '意大利'] as Array < any > ) //国家
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 layouts = ref([
    {Name: '不限',Id:0},
    {Name: '横版',Id:1},
    {Name: '竖版',Id:2},
])
const marketRef = ref<any>()

const loading = ref(false as any)
const searchData = ref({} as any)
searchData.value = inject(injectKeyTemplate)
const marketStore = useScreenStore()

const { SalesEditor, SalesBack } = storeToRefs(useSellTemplateStore())

const model = ref(2)
const deleteLoading = ref<any>(null)
const datas = reactive({
    loading: false,
    ColorValue: '',
    scrollTop: 0,
    currentImg: 0,// 当前查看img
    TemDetails: {}
})
const DetailsVisible = ref(false)
let TemplateType = 0
if(router.currentRoute.value.path=='/market') model.value=1
if(router.currentRoute.value.path.includes('create')) {
    model.value=2
    if(router.currentRoute.value.fullPath.indexOf('/ad')!=-1) TemplateType = 2
    else if(router.currentRoute.value.fullPath.indexOf('/trip')!=-1) TemplateType = 1
}else if(router.currentRoute.value.path.includes('op')) {
    model.value=0
} 
marketStore.setModel(model.value)
const queryObj = reactive({
    pageIndex: 1,
    pageSize: 20,
    LineId: 0, //线路Id
    Title: '', //模板名称
    TagJsonStr: '',
    CountryList: [], //国家名称
    SeasonList: [], //季节名称
    ColorList:  [], //颜色名称
    pageCount: 0, //总页数
    TempType: 0,
    TemplateType: TemplateType,//0 不限 1模版 2广告
    type: 0,
    sort: 0,//排序方式
})
const queryColor = ref({
    DictKey: 'Trip_Template_Color',
    Code: '',
})

const ColorList = ref([]) //DominantColour()

// 版型 横版 竖版
const SwitchingVersion = (row: Object) =>{
    queryObj.TempType = row.Id
    search()
}
// 喜欢、不喜欢接口调用
const BeFondOf = (row: Object) => {
    row.checked = !row.checked
}

// 删除模版
const deleteTemplate = (item:any) => {
    ElMessageBox.confirm(
        `此操作将删除该${item.TemplateType==2?'广告':'行程'}，是否确定?`,
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).then(async () => {
        try {
            let queryMsg = {
                TempId: item.TempId
            }
            deleteLoading.value = ElLoading.service({
                lock:true,
                text:'正在处理'
            })
            let dataRes = await ConfigService.SetDeleteTripTemplate(queryMsg)
            if (dataRes.data.resultCode == 1) {
                queryObj.pageIndex = 1
                ElMessage({
                    showClose: true,
                    message: `删除${item.TemplateType==2?'广告':'行程'}成功`,
                    type: 'success',
                })
                await queryTemplateBySearchHandler()
            }else {
                ElMessage({
                    showClose: true,
                    message: `删除${item.TemplateType==2?'广告':'行程'}失败`,
                    type: 'warning',
                }) 
            }
            deleteLoading.value.close()
            deleteLoading.value = null
        } catch (error) {}
    }).catch(() => {})
    
}

// 查看所有子模版
const getTemplate = (item:any) => {
    DetailsVisible.value = true
    datas.TemDetails = item
}

/**
 * 页面跳转
 */
const goToTemplate = (item: any) => {
    let url = ''
    if(model.value==2) url = createSaleCreateLink(item.TempId,item.TemplateType)
    else if(model.value==0 && router.currentRoute.value.params.configId) url = createOpEditorLink(parseInt(router.currentRoute.value.params.configId.toString()),item.TempId)
    else if(model.value==1) url = managerTemplateLink(item.TempId,item.TemplateType)
    if(url!='') {
        router.push({
            path:url
        })
    }
}

const search = () => {
    queryObj.pageIndex = 1
    queryTemplateBySearchHandler()
}
/***
 * 获取模板市场分页列表
 */
const queryTemplateBySearchHandler = async () => {
    const parmas = router.currentRoute.value.params
    if(parmas.temptype) queryObj.TempType = parseInt(parmas.temptype.toString())
    loading.value = true
    try {
        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;
        }
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}

//线路切换
const onLineChangeHandler = (lineId: number) => {
    queryObj.LineId = lineId;
    search()
}
//国家切换
const onCountryNameChangeHandler = (row: Object) => {
    if(row=='') {
        queryObj.CountryList = []
        countriesOther.value.forEach(x=>{
            x.checked = false
        })
        countries.value.forEach(x=>{
            x.checked = false
        })
    }else{
        if(!row.checked) {
            row.checked = true
            queryObj.CountryList.push(row.CountryName)
        }else{
            row.checked = false
            let list = queryObj.CountryList.filter(x=>{
                if(x!=row.CountryName) return x
            })
            queryObj.CountryList = list
        }
    }
    search()
}

//季节切换
const onSeasonNameChangeHandler = (row: Object) => {
    if(row=='') {
        queryObj.SeasonList = []
        seasonArr.value.forEach(x=>{
            x.checked = false
        })
    }else{
        if(!row.checked) {
            row.checked = true
            queryObj.SeasonList.push(row.SeasonName)
        }else{
            row.checked = false
            let list = queryObj.SeasonList.filter(x=>{
                if(x!=row.SeasonName) return x
            })
            queryObj.SeasonList = list
        }
    }
    search()
}

//类型切换
const onTypeChangeHandler = (Type: string,num: Number) => {
    if(num==1){
        queryObj.sort = Type;
    }else{
        searchData.value.MarketTemplateType = Type
        queryObj.TemplateType = Type;
    }
    search()
}

//颜色切换
const onColorNameChangeHandler = (row: Object) => {
    if(row=='') {
        queryObj.ColorList = []
        colorArr.value.forEach(x=>{
            x.checked = false
        })
    }else{
        if(!row.checked) {
            row.checked = true
            queryObj.ColorList.push(row.Name)
        }else{
            row.checked = false
            let list = queryObj.ColorList.filter(x=>{
                if(x!=row.Name) return x
            })
            queryObj.ColorList = list
        }
    }
    search()
}

/**
 * 获取线路列表
 */
const getLinesHandler = async () => {
    try {
        let response = await LineService.GetLineListAsync()
        if (response.data.resultCode == 1) {
            lines.value = response.data.data;
        }
    } catch (error) {
        
    }
}

/**
 * 获取模板市场查询条件
 */
const getTemplateQuery = async () => {
    try {
        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
                })
                countries.value = tempData.CountryList.filter((x,index)=>{ 
                    if(model.value==1) {return index<12}
                    else return index<13
                })
            }
            //颜色
            if (tempData && tempData.ColorList) {
                for(let i=0;i<ColorList.length;i++){
                    colorArr.value.push({
                        ColorName: ColorList[i].ColorName,
                        ColorValue: ColorList[i].ColorValue,
                        checked: false,
                        ID: ColorList[i].Id
                    })
                }
                // 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;
            }
            //类型
            for(let i=0;i<3;i++){
                let text = '所有模版'
                if(i==1) text = '行程'
                if(i==2) text = '广告'
                typeArr.value.push({
                    type:i,
                    typeName:text
                })
            }
            for(let i=0;i<2;i++){
                let text = '综合排序'
                if(i==1) text = '最新模板'
                sortArr.value.push({
                    type:i,
                    typeName:text
                })
            }
        }
    } catch (error) {
        
    }
}
const scrollingHandler = () =>{
    if(marketRef.value && !loading.value){
        let maxHeight = marketRef.value.scrollHeight - marketRef.value.offsetHeight
        let scrollTop = marketRef.value.scrollTop
        if(maxHeight - scrollTop==0 && queryObj.pageCount > queryObj.pageIndex) {
            queryObj.pageIndex++
            queryTemplateBySearchHandler()
        }
        datas.scrollTop =  scrollTop
    }
    
}

const getColor = async () => {
    let response = await LineService.GetParentColor(queryColor.value)
    if (response.data.resultCode == 1) {
        ColorList.value = response.data.data
    }
}

getColor()
getLinesHandler();
getTemplateQuery();
queryTemplateBySearchHandler();

onMounted(()=>{
    marketRef.value.addEventListener("scroll", scrollingHandler);
})
</script>

<style lang="scss" scoped>
    @font-face {
        font-family: "aliMarketfont";
        font-weight: 400;
        src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/285OveHVCHM7.woff2") format("woff2"),
            url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/pz3etdXOpfWP.woff") format("woff");
        font-display: swap;
    }
    .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;
    }
    .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;
    }
    .marketTag-color{
        margin-bottom: 13px;
        margin-left: 15px;
        margin-right: 31px;
        text-align: center;
    }
    .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;
    }
    
    .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;}
    }
    .Market-select-line{
        width: 1px;
        height: 14px;
        background: #F4F4F4;
        right: 61px;
    }
    .Market-select ::v-deep(.el-input__wrapper){
        box-shadow: 0 0 0;
        border-radius: 8px 0 0 8px;
        padding: 1px 23px;
    }
    ::v-deep(.el-input__wrapper):hover{
        box-shadow: 0 0 0;
    }
    ::v-deep(.el-input__wrapper.is-focus){
        box-shadow: 0 0 0;
    }
    ::v-deep(.el-input-group__append){
        box-shadow: 0 0 0;
        background: #fff;
    }
    .input-with-select{
        height: 46px;
    }
    .MarketAdd{
        width: 90px;
        height: 36px;
        background: linear-gradient(134deg, #649DED, #570AD8);
        border-radius: 8px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px !important;
        color: #FFFFFF;
        line-height: 36px;
        text-align: center;
    }
    .Market-fromBj{
        height: 486px;
        background: url('../../assets//img/homeBJ.png') no-repeat;
        background-size: auto 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
    }
    .Market-from{
        background: linear-gradient(0deg, #FFF, #E3ECFF);
        height: 100vh;
        overflow: auto;
    }
    .marketTag .el-check-tag.is-checked,.marketTag .el-check-tag{
        padding: 0;
    }
    .marketTag{
        padding: 20px 0px 0 30px;
        width: 460px;
        overflow: hidden;
        /* height: 245px; */
    }
    .marketTag+.marketTag{
        margin-left: 32px;
    }
    .ColorName{
        background: black;
        color: #fff;
        padding: 2px 10px;
        border-radius: 3px;
        margin-left: -10px;
    }
    .colorMark{
        width: 28px;
        height: 28px;
        position: relative;
        display: inline-block;
        border-radius: 50%;
        margin: 4px;
        background: #fff;
        border: 4px solid #eee;
    }
    .aliMarketfont {
        font-family: aliMarketfont;
    }
    .el-check-tag.is-checked{
        background: #000;
        color: #fff;
    }
    .el-check-tag {
        width: 86px;
        height: 36px;
        margin-right: 14px;
        margin-bottom: 18px;
        line-height: 36px;
        border-radius: 6px;
        text-align: center;
        background: #FFF;
        font-weight: 400 !important;
        font-size: 14px !important;
    }
    .MarketIndexListBox{
        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;
    }
    .MarketIndexList{
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .MarketIndexList-Hover{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(23,23,23,0.5);
        opacity: 0;
        transition: opacity 0.5s ease;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: $themeHoverColor;
    }
    .MarketIndexListBox:hover .MarketIndexList-Hover{
        opacity: 1;
    }
    .MarketIndexList-Hover div span{
        
    }
    .MarketIndexListBox:hover{
        top: -5px;
        
    }
    
    .MarketIndexList-img{
        width: 100%;
        border-radius: 6px;
    }
    .MarketIndexList-img img{
        width: 100%;
        object-fit: cover;
    }
    .MarketIndexList-text{
        font-size: 14px;
        padding: 10px;
        padding-bottom: 5px;
    }
    .MarketIndexList-text span{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .MarketVerticalLine{
        width: 1px;
        height: 80%;
        background: #dcdfe6;
        margin-right: 30px;
        margin-top: 5px;
    }
    .MarketIndexButtom{
        color: #ffff;
        width: 86px;
        height: 36px;
        letter-spacing: 1px;
        font-size: 14px !important;
        border-radius: 6px;
    }
    .MarketIconAbsolute{
        width: 36px;
        height: 36px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 36px;
        color: #B9B9B9;
        z-index: 2;
    }
    .MarketIndexButtomIcon>div:hover .el-icon, .MarketIndexButtomIcon>div:hover .IconLike{
        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;
    }
</style>