You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
830 lines
23 KiB
830 lines
23 KiB
<template>
|
|
<div class="home-wrap column">
|
|
<div class="home-main flex">
|
|
<div class="home-main-left column">
|
|
<div class="systemNotice common-area">
|
|
<h2 class="flex-between">
|
|
<b>系统通知</b>
|
|
<span class="hoverCommon" @click="lookMoreSystem">查看更多</span>
|
|
</h2>
|
|
<div class="systemNotice-main">
|
|
<div class="sales-item flex" v-for="(item, key) in noticeList.slice(0, 2)" :key="item.title">
|
|
<img :src="require('@/assets/home/notice_tag_'+(key+1)+'.png')" alt="">
|
|
<div class="column">
|
|
<b class="flex">
|
|
{{ item.title }}
|
|
<!-- <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt="">-->
|
|
</b>
|
|
<p v-html="item.content">{{ item.content }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="salesStatistics common-area">
|
|
<h2 class="flex-between">
|
|
<b>销售统计 <span>{{ saleStats.date }}数据</span></b>
|
|
<span class="hoverCommon" @click="lookMoreSystem">查看全部</span>
|
|
|
|
</h2>
|
|
<div class="salesStatistics-main flex">
|
|
<div class="sales-item flex">
|
|
<img :src="require(`@/assets/home/sales1.png`)" alt="">
|
|
<div class="column">
|
|
<p class="flex"><span class="number">{{ saleStats.income }}</span> <span class="unit">元</span></p>
|
|
<span class="label">销售金额</span>
|
|
</div>
|
|
</div>
|
|
<div class="sales-item flex">
|
|
<img :src="require(`@/assets/home/sales2.png`)" alt="">
|
|
<div class="column">
|
|
<p class="flex"><span class="number">{{ saleStats.cost }}</span> <span class="unit">元</span></p>
|
|
<span class="label">成本支出</span>
|
|
</div>
|
|
</div>
|
|
<div class="sales-item flex">
|
|
<img :src="require(`@/assets/home/sales3.png`)" alt="">
|
|
<div class="column">
|
|
<p class="flex"><span class="number">{{ saleStats.check_num }}</span></p>
|
|
<span class="label">查重订单量</span>
|
|
</div>
|
|
</div>
|
|
<div class="sales-item flex">
|
|
<img :src="require(`@/assets/home/sales4.png`)" alt="">
|
|
<div class="column">
|
|
<p class="flex"><span class="number">{{ saleStats.ai_num }}</span></p>
|
|
<span class="label">AIGC订单量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="supplyPrice common-area">
|
|
<h2>供货价格 </h2>
|
|
<div class="supplyPrice-main flex">
|
|
<div :class="['supplyPric-item', 'supplyPric-item' + classify_id]" v-for="(vers, classify_id) in classifyId2Vers" :key="classify_id">
|
|
<div class="item-top flex-between">
|
|
<div class="flex">
|
|
<img :src="require(`@/assets/home/service_classification_${classify_id}.png`)" alt="">
|
|
<b>{{ classifyId2Name[classify_id] }}</b>
|
|
</div>
|
|
<a href="/agent/supplyList" target="_blank"><span>详情</span></a>
|
|
</div>
|
|
<div class="list-wrap" style="overflow: auto;height:410px">
|
|
<div v-for="verid in vers" :key="verid" class="item-list">
|
|
<p class="item-list-name mt-16" v-if="ver2types[verid] && ver2types[verid].length>1">{{ ver2info[verid].name }}</p>
|
|
<p v-else></p>
|
|
<p class="flex-between" v-for="type in ver2types[verid]" :key="type">
|
|
{{ type2name[type] }}
|
|
<span>{{ supplyPriceList[type].price }}元 / {{ supplyPriceList[type].unit_format }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer></Footer>
|
|
|
|
</div>
|
|
<div class="home-main-right">
|
|
<div class="accountBalance common-area">
|
|
<div class="mb-16 red" v-if="walletList && walletList.pub && walletList.pub.forzen_money > 0">含冻结金额 {{ walletList.pub.forzen_money }} 元</div>
|
|
<div class="flex-between">
|
|
<span>账户余额 <b>{{ walletList.pub.remain }}</b> 元</span>
|
|
<span class="hoverCommon" @click="isShowSpec = !isShowSpec">{{ isShowSpec ? '收起' : '展开' }}</span>
|
|
</div>
|
|
<div v-show="isShowSpec" class="mt-24" style="border-top: 1px solid #ebebeb;" v-if="walletList && walletList.spec && walletList.spec.length > 0">
|
|
<div class="mt-24"></div>
|
|
<p class="specMoney" v-for="(item, index) in walletList.spec" :key="index">{{ item.verdesc }} : {{ item.remain }}</p>
|
|
</div>
|
|
</div>
|
|
<div style=" background: #fff">
|
|
<div class="importantReminder common-area">
|
|
<h2>重要提醒</h2>
|
|
<div class="reminder1 column" v-if="expireServices.taobao_expire_list && expireServices.taobao_expire_list.length > 0">
|
|
<p>淘宝应用即将过期</p>
|
|
<div @click="lookTaoBaoExpire">查看详情</div>
|
|
</div>
|
|
<div class="reminder3 column" v-if="expireServices.ssl_expire_list && expireServices.ssl_expire_list.length > 0">
|
|
<p>SSL证书（https）即将过期</p>
|
|
<div @click="lookSslExpire">查看详情</div>
|
|
</div>
|
|
<div class="reminder2 column hide">
|
|
<p>请尽快建立站点，开始售卖</p>
|
|
<div @click="lookTaoBaoNum1">立即前往</div>
|
|
</div>
|
|
</div>
|
|
<div class="carouselImage common-area">
|
|
<!-- 轮播图 -->
|
|
<img src="@/assets/home/home-right.png" alt="">
|
|
</div>
|
|
<div class="preferredMarket common-area">
|
|
<h2>优选营销</h2>
|
|
<div class="column">
|
|
<div class="sales-item flex" v-for="(item, index) in preferredMarketList" :key="item.name">
|
|
<img :src="require(`@/assets/home/preferredMarket${index + 1}.png`)" alt="">
|
|
<div class="column">
|
|
<span class="flex">{{ item.label }}
|
|
<!-- <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> -->
|
|
</span>
|
|
<p>{{ item.desc }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="usageGuide common-area">
|
|
<h2 class="flex-between">
|
|
<b>使用指南</b>
|
|
<span class="hoverCommon"><a class="faq" href="https://zhic.yuque.com/staff-chwecz/xhk8nt" target="_blank">查看全部</a></span>
|
|
</h2>
|
|
<p class="hoverCommon"><a class="faq" href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3" target="_blank">微信支付在平台使用的常见问题？</a></p>
|
|
<p class="hoverCommon"><a class="faq" href="https://zhic.yuque.com/staff-chwecz/xhk8nt/izn0gm" target="_blank">自定义域名设置步骤说明</a></p>
|
|
<p class="hoverCommon"><a class="faq" href="https://zhic.yuque.com/staff-chwecz/xhk8nt/nocf04" target="_blank">3级分销</a></p>
|
|
</div>
|
|
<div class="customWrap common-area">
|
|
<h2>联系客服</h2>
|
|
<img src="@/assets/home/kf.png" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Footer from '@/components/Footer.vue';
|
|
|
|
export default {
|
|
name: 'HomeView',
|
|
data() {
|
|
return {
|
|
// AUTH
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
|
|
// 表格加载
|
|
tableLoading: true,
|
|
type2name:[],
|
|
classifyId2Name: [],
|
|
classifyId2Vers: [],
|
|
ver2types: [],
|
|
ver2info: [],
|
|
supplyPriceList: [],
|
|
serviceList: [],
|
|
|
|
saleStats: [],
|
|
|
|
expireServices: [],
|
|
|
|
walletList: [],
|
|
noticeList: [],
|
|
|
|
isShowSpec: false,
|
|
|
|
|
|
preferredMarketList: [
|
|
{
|
|
desc: '电脑版、小程序、微信H5',
|
|
label: '多端系统'
|
|
},
|
|
{
|
|
desc: '基于成交量的推广支持',
|
|
label: 'OCPC推广'
|
|
},
|
|
{
|
|
desc: '二级、裂变分销，发展代理网络',
|
|
label: '多级分销'
|
|
},
|
|
{
|
|
desc: '在报告或网页中嵌入广告',
|
|
label: '嵌入广告'
|
|
},
|
|
{
|
|
desc: '自定义次数卡券或微信代金券',
|
|
label: '发放卡券'
|
|
},
|
|
],
|
|
systemList: [
|
|
{
|
|
desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…',
|
|
label: 'AI范文整合的通知'
|
|
},
|
|
{
|
|
desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…',
|
|
label: 'AI范文整合的通知'
|
|
},
|
|
],
|
|
}
|
|
},
|
|
components: {
|
|
// HelloWorld
|
|
Footer,
|
|
},
|
|
mounted() {
|
|
this.getSupplyServiceList()
|
|
this.getSaleStats()
|
|
this.getExpireServices()
|
|
this.getWalletList()
|
|
this.getNoticeList()
|
|
},
|
|
methods: {
|
|
getSupplyServiceList() {
|
|
this.tableLoading = true
|
|
const that = this
|
|
that.serviceList = []
|
|
this.$http('POST', '/agentnew/ajax_get_supply_services', {
|
|
|
|
},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
this.tableLoading = false
|
|
this.$nextTick(() => {
|
|
that.serviceList = response.data.list
|
|
this.classifyId2Name = response.data.classifyid2name;
|
|
this.classifyId2Vers = response.data.classifyid2vers;
|
|
this.ver2types = response.data.ver2types;
|
|
this.ver2info = response.data.ver2info;
|
|
this.type2name = response.data.type2name;
|
|
this.supplyPriceList = response.data.supply_price;
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
getSaleStats() {
|
|
this.$http('POST', '/agentnew/ajax_get_sale_stats', {
|
|
|
|
},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
this.saleStats = response.data
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
getExpireServices() {
|
|
this.$http('POST', '/agentnew/ajax_get_expire_services', {
|
|
|
|
},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
this.expireServices = response.data
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
getWalletList() {
|
|
this.$http('POST', '/agentnew/ajax_get_wallet', {
|
|
|
|
},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
this.walletList = response.data
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
getNoticeList(){
|
|
this.$http('POST', '/agentnew/ajax_get_notice_list', {
|
|
|
|
},{
|
|
headers:{
|
|
'Auth': this.token
|
|
}
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
this.noticeList = response.data
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
lookTaoBaoExpire() {
|
|
// 查看淘宝账号
|
|
location.href = '/agent/payList'
|
|
},
|
|
lookSslExpire() {
|
|
// 查看淘宝账号
|
|
location.href = '/agent/'
|
|
},
|
|
lookTaoBaoNum1() {
|
|
// 查看淘宝账号
|
|
},
|
|
lookMoreSystem() {
|
|
// 系统通知 -查看更多
|
|
this.$router.push('/agent/noticeList')
|
|
},
|
|
lookAllSales() {
|
|
// 销售统计 -查看全部
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
a {
|
|
text-decoration: none;
|
|
color: #006AFF;
|
|
}
|
|
|
|
.mt-24 {
|
|
margin-top: 24px;
|
|
}
|
|
.mb-16 {
|
|
margin-bottom: 16px;
|
|
}
|
|
.red {
|
|
color: #FF4D4F;
|
|
}
|
|
|
|
.specMoney {
|
|
font-family: Microsoft YaHei UI;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: 22px;
|
|
letter-spacing: 0.08em;
|
|
color: #626573;
|
|
|
|
}
|
|
|
|
.faq {
|
|
color: #8A9099;
|
|
}
|
|
|
|
.home-wrap {
|
|
padding: 12px;
|
|
|
|
|
|
|
|
.home-main {
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 12px;
|
|
min-width: 1018px;
|
|
max-width: 1750px;
|
|
margin: 0 auto;
|
|
align-items: stretch;
|
|
box-sizing: border-box;
|
|
.home-main-left {
|
|
min-width: 746px;
|
|
max-width: 1398px;
|
|
flex: 1;
|
|
|
|
.common-area {
|
|
width: 100%;
|
|
padding: 20px 14px;
|
|
box-sizing: border-box;
|
|
/* 确保 padding 不会影响宽度计算 */
|
|
background: #fff;
|
|
margin-bottom: 12px;
|
|
|
|
h2 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
letter-spacing: 0.08em;
|
|
color: #1E2226;
|
|
margin: 0 0 20px 0;
|
|
text-align: left;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.08em;
|
|
color: #8A9099;
|
|
}
|
|
}
|
|
}
|
|
|
|
.systemNotice-main {
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.sales-item {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
padding: 18px 12px;
|
|
box-sizing: border-box;
|
|
transition: all .3s;
|
|
|
|
.systemIcon {
|
|
display: none;
|
|
width: 12px;
|
|
height: 8px;
|
|
}
|
|
|
|
&:hover {
|
|
background: #F6F7FA;
|
|
|
|
b {
|
|
color: #006AFF;
|
|
}
|
|
|
|
.systemIcon {
|
|
margin-left: 12px;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
div {
|
|
width: calc(100% - 30px);
|
|
}
|
|
|
|
/* 确保 padding 不会影响宽度计算 */
|
|
b {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0.08em;
|
|
color: #1E2226;
|
|
}
|
|
|
|
p {
|
|
width: 100%;
|
|
margin-top: 6px;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
color: #8A9099;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.salesStatistics-main {
|
|
img {
|
|
width: 54px;
|
|
height: 54px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.sales-item {
|
|
width: 25%;
|
|
justify-content: flex-start;
|
|
padding: 14px 12px;
|
|
transition: all .3s;
|
|
.number{
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
font-family: 'Roboto Condensed';
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
color: #1E2226;
|
|
line-height: 29px;
|
|
}
|
|
.unit{
|
|
color: #1E2226;
|
|
font-size: 12px;
|
|
}
|
|
.label{
|
|
color: #8A9099;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
&:hover {
|
|
border-radius: 8px;
|
|
background: #F6F7FA;
|
|
}
|
|
}
|
|
}
|
|
|
|
.supplyPrice-main {
|
|
display: flex;
|
|
gap: 20px;
|
|
|
|
.supplyPric-item {
|
|
padding: 20px 0 20px 14px;
|
|
box-sizing: border-box;
|
|
color: #8A9099;
|
|
flex: 1;
|
|
border-radius: 4px;
|
|
transition: all .5s;
|
|
cursor: pointer;
|
|
.list-wrap{
|
|
flex: 1;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
box-sizing: border-box;
|
|
padding-right: 14px;
|
|
}
|
|
.item-top {
|
|
border-bottom: 1px solid #EAECF0;
|
|
padding-bottom: 20px;
|
|
width: calc(100% - 14px);
|
|
box-sizing: border-box;
|
|
margin-right: 14px;
|
|
padding-right: 14px;
|
|
b {
|
|
color: #1E2226;
|
|
}
|
|
|
|
img {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
|
|
.mt-16 {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.item-list {
|
|
// margin-top: 16px;
|
|
text-align: left;
|
|
line-height: 18px;
|
|
|
|
p {
|
|
margin-bottom: 8px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.item-list-name {
|
|
margin-bottom: 8px;
|
|
color: #1E2226;
|
|
}
|
|
}
|
|
}
|
|
|
|
.supplyPric-item1 {
|
|
|
|
background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 17%, #FFFFFF 100%);
|
|
border: 1px solid #DFE2E6;
|
|
transition: all .5s ease;
|
|
|
|
&:hover {
|
|
color: #626573;
|
|
transition: all .5s ease;
|
|
background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 60%);
|
|
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
|
|
}
|
|
}
|
|
|
|
.supplyPric-item2 {
|
|
background: linear-gradient(180deg, #FFFAF6 1%, rgba(255, 255, 255, 0.6233) 14%);
|
|
border: 1px solid #DFE2E6;
|
|
transition: all .5s ease;
|
|
|
|
&:hover {
|
|
color: #626573;
|
|
transition: all .5s ease;
|
|
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
|
|
background: linear-gradient(180deg, #FFFAF6 0%, #FFFFFF 60%);
|
|
}
|
|
}
|
|
|
|
.supplyPric-item3 {
|
|
background: linear-gradient(180deg, #FFF6F6 0%, rgba(255, 255, 255, 0.8151) 14%, rgba(255, 255, 255, 0) 100%);
|
|
border: 1px solid #DFE2E6;
|
|
transition: all .5s ease;
|
|
|
|
&:hover {
|
|
color: #626573;
|
|
transition: all .5s ease;
|
|
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
|
|
background: linear-gradient(180deg, #FFF6F6 0%, #FFFFFF 60%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-main-right {
|
|
flex: 0 0 auto;
|
|
/* 右边盒子不伸缩 */
|
|
min-width: 260px;
|
|
/* 右边盒子最小宽度 */
|
|
max-width: 328px;
|
|
/* 右边盒子最大宽度 */
|
|
width: 260px;
|
|
|
|
/* 在 1440px 屏幕下的固定宽度 */
|
|
.common-area {
|
|
padding: 20px 0px;
|
|
margin: 0 14px;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
line-height: normal;
|
|
letter-spacing: 0.08em;
|
|
|
|
/* text/text_1 */
|
|
h2 {
|
|
font-weight: bold;
|
|
margin: 0;
|
|
font-size: 16px;
|
|
color: #1E2226;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
color: #8A9099;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.accountBalance {
|
|
padding: 27px 14px;
|
|
margin: 0;
|
|
margin-bottom: 12px;
|
|
align-items: baseline;
|
|
background: #fff;
|
|
|
|
b {
|
|
font-family: Roboto Condensed;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
line-height: 27px;
|
|
letter-spacing: normal;
|
|
color: #1F2026;
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
// color: #8A9099;
|
|
color: #1F2026;
|
|
&:nth-last-child(1){
|
|
color: #8A9099;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.importantReminder {
|
|
border-bottom: 1px solid #EAECF0;
|
|
|
|
.reminder1,
|
|
.reminder2 {
|
|
border-radius: 4px;
|
|
background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
|
|
padding: 14px 8px;
|
|
border: 1px solid transparent;
|
|
margin-top: 20px;
|
|
transition: all .3s;
|
|
|
|
&:hover {
|
|
transition: all .3s;
|
|
border-radius: 4px;
|
|
background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
|
|
/* main/main_erro */
|
|
border: 1px solid #FF4D4F;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: #FF4D4F;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.reminder3 {
|
|
border-radius: 4px;
|
|
background: linear-gradient(256deg, #FBE7D7 1%, #FEF7EC 53%);
|
|
padding: 14px 8px;
|
|
border: 1px solid transparent;
|
|
margin-top: 20px;
|
|
transition: all .3s;
|
|
|
|
&:hover {
|
|
transition: all .3s;
|
|
border-radius: 4px;
|
|
background: linear-gradient(256deg, #FBE7D7 1%, #FEF7EC 53%);
|
|
/* main/main_erro */
|
|
border: 1px solid #FB832D;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: #FB832D;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.carouselImage {
|
|
padding-bottom: 0;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.preferredMarket {
|
|
border-bottom: 1px solid #EAECF0;
|
|
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sales-item {
|
|
padding: 12px 0;
|
|
color: #8A9099;
|
|
font-size: 12px;
|
|
transition: all .3s ease-in-out;
|
|
|
|
.systemIcon {
|
|
display: none;
|
|
width: 12px;
|
|
height: 8px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
color: #1F2026;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
&:hover {
|
|
.systemIcon {
|
|
display: block;
|
|
}
|
|
|
|
span {
|
|
transition: all .3s ease-in-out;
|
|
color: #006AFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 34px;
|
|
height: 34px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.customWrap {
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
img {
|
|
/* 自动布局子元素 */
|
|
width: 106px;
|
|
height: 106px;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
.usageGuide {
|
|
border-bottom: 1px solid #EAECF0;
|
|
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 10px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1440px) {
|
|
.home-main-right {
|
|
transition: all .3s;
|
|
width: 286px !important;
|
|
/* 在 1440px 屏幕下的固定宽度 */
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
.home-main-right {
|
|
transition: all .3s;
|
|
width: 260px !important;
|
|
/* 在 1440px 屏幕下的固定宽度 */
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1441px) {
|
|
.home-main-right {
|
|
transition: all .3s;
|
|
width: 328px !important;
|
|
/* 在大于 1440px 屏幕下的最大宽度 */
|
|
}
|
|
}
|
|
</style>
|
|
|