<template>
|
<div class="home no_touch">
|
<!-- //头部组件-->
|
<div class="px-32">
|
<ex-header :unread_num="`${unreadMsg_num}`"></ex-header>
|
<ioe-swiper />
|
<van-notice-bar style="margin-top: 5px;" class="font-26 textColor" left-icon="volume-o" :scrollable="false"
|
background="transparent" :text="announceTitle">
|
<div slot="left-icon" class="pr-13 flex items-center">
|
<img class="w-50 h-56" src="../assets/image/diqiu.png" alt="">
|
</div>
|
<van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
|
<van-swipe-item v-for="item in announceList" :key="item.id" @click="toAnnounceDetail(item.id)">{{ item.title
|
}}</van-swipe-item>
|
</van-swipe>
|
<div class="ml-20 flex items-center" slot="right-icon" @click.stop="$router.push('/announce')"><img
|
class="w-36 h-36" src="../assets/more.png" alt="">
|
</div>
|
</van-notice-bar>
|
</div>
|
<div class=" contRound" style="border-top-left-radius: 30px;border-top-right-radius: 30px;">
|
<div class="double">
|
<div class="double_box_left" @click="$router.push('/recharge/rechargeList')">
|
<div class="double_box_left_left">
|
<div class="double_box_left_left_txt">{{$t('充值')}}</div>
|
<div class="double_box_left_left_titlle">{{$t('去充值')}}</div>
|
</div>
|
<div class="double_box_left_right">
|
<img class="double_box_left_right_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA6CAYAAAAA0F95AAAAAXNSR0IArs4c6QAABDtJREFUaEPlW89LHFcc/7w3z/qDBPTUm3FIA0IgWUGlBxvXPyBk/oCCa7CXXprQSyCQ9iL00jbJofRgyR566yGG5JxIEki7Kyo5SbB51ptQcKC6E+rOvPLGHavr/NqZ1X3jPNiDvu978/183vfnm12CnA+SZfxV/k8RYJMAio2PhLPIgJkRvXcjDrZMEbDCraE9iBsEtAg4RYD0+4MkpgCdGtc/Wo0iQWkCVrjo37N3Dap1TQrYRjBgX5iLY3rvVKYIkIDr2CkIRzMIpZOAKEQBCJtn6BkY0YkZJtNxC5B+LKBdJSDGPuAgs05AhUaNscHuJ0oREN+PEwBuWiIc8WD8Yt+tjhLg+TEILVBKbghgKD20eDsQYGNU79VPlYCjfkyuHkpP8bRusxQD9LCU2JYYUOE7BYBOnogfpyRE2PbM+CfnykHbJCLA9WPbLiZMTykhtbacAOVRvXcmFQHSrG27VnQIKZ62H7cG10+amGN6z0DLBASUmen16cAOAtpIUFV44AJutIY1raIfp+XMdsTtTy/23fe1D/nPN9wa6gJenGaKSguqxfWBZbFrAZX3u2VC6HSLm2ZInJgM3bpfWewSUOWWyBCaZKrW61Njl84vNi8m0vwZwJPtmp1VQWVxwwJq22FNyN8mMP9Mw+YWUPuQqHRQiilBsOBo7Pbaz2TDRfPH+90yDYgBEvy9X7QzAbzpFEybsRGXgN957ZYG8qPfMT38jWL5HVXqBNuozKJLQFgcKM2xNj5Pua3MA4de4hb3qwPOOAE4IKDyZ+0+oeSr5jPKDQFL67uG0Ojj3BKwwrf76+jZzi0BjYrwRfMNTm5cwK0HuPUtBb45bAW5IqDKLfmKSVpBbsaRunY/DnTztt7NK07lscK+yq1jcUBxDKnUO0ZAWFmc6kmKLj5GQIX/WyCwVxTVt+1q+fa2Vf5/e3ySNyUqNNa+Ohxuj3OVBj37qqzvlIimPZJ/55KAw2VxLgmQJ++1x7klwGuPc0uAVxbnlgAvDuSWAK89Ls0x2SCd2RFai8j2+OYcO9Ied4qJ4UEB45qDwY8F+nqAtb8IXr+Vn/0b66j5IL1DCZBxoDTHOt4eG585Lni/sfByn4Cw+YVXwdf6kdXo5dm9k6yGIw1q4oqD2ev+4CMXNwS++1VzLcZvKE/Anc9tDF9IdwYSvCQhkwSU79bjHnSgXO0D8OX3/i94lLeAn76uu0Ev7QhK58oTkHsXkP4vSUgz5p/Sg3TZvI/yFuClOJkKfdNgI8WFzXupMpNB0FNapsOJK8LNCDKobW4RyPzupbeo+USFkFzU6TogjenHWZsJF4gDJKlMHALkC9OA3+Ykfaw666IJ+GLvOQQif3ujDqT4mgg4TyIJGC5ZQxpjywACv3Ac/5EKSQqYtt34klSUWi4JXewHCBhRsi3ORx5Ai/tFiwuYIFi162xmrUw2/gPrka3M/j7biAAAAABJRU5ErkJggg=="/>
|
</div>
|
<div class="double_box_icon">NEW</div>
|
</div>
|
<div class="double_box_left" @click="$router.push('/customerService')">
|
<div class="double_box_left_left">
|
<div class="double_box_left_left_txt">{{$t('联系客服')}}</div>
|
<div class="double_box_left_left_titlle">{{$t('在线客服')}}</div>
|
</div>
|
<div class="double_box_left_right">
|
<img class="double_box_left_right_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAAAXNSR0IArs4c6QAABThJREFUaEPtW99rI3UQn9ndnOZUqP+AzYrCgQe20Nxz4z9g/AualBPEl7bgm2C+eRB8kdYHwYfedQvia1t804cGEcSm0CCc9uG4Td+FC9g21SY79psmubSX3f3+2jSF7OvOzHc+M/Od78zsdxHG6CkwfwrQWrCI5glgBgAyXfVqCFAnxO2N0vSmCZXRhBATMgrMzyPgBgBMxcirAyLTNcBYAF9kR6sEtCxjQERkj0vTZRmeQdobB75YPioREVMBgIBrj9n0ihqvCpchngLzC93wVpZIQB95zN2WFXCjHi+yuj+QwGR179E3CMj1mNuQEXBjwE14uweUgFY85q7dCuCLrL5FAHkZZcNoCWjHY66ULCmPV/1/5hHuLAAE/JztnrFYQ6AatIOduXdeE95rRVY/gMuz2sRT32AZV0aQEPDf/GbGAeBn7HyUcF5k2AC5WTddj1OiyOoURyPzfoNlhLD0ZMYS7/nHMwjWLgDGFRZdmdggsHIP3Du1KMXHGvilp+lAHHTfng0HaDbK84Yyem/B2gbLzMpESKTH9/2m/2Ivy4jt0FaybjoXxjW2yW3/6UmebGtLGu4gQ6uVy777RmWYjALzlxFwVUt+P8CwIFu7h3p879mJh2gt6CiGAN6cmy6GAJ9CQF7ACOaOUE2kMzqXFAq86p/yva113PAsP+emQ4+ZbkemF1Uo7+0Y4E0jx03WTUfmkYsefA0Bl1Qii4DKHnMVG5yQFav+aIDz5QvMZwhYkgFPQN9c1OdSreyg/FBvaGb07hpUy7p3hY6Zbu3OwfemLmF24E1JUaUjEwL++7MTz0owuYWh4gYAwA+5AbBb0hIArwRrgFgBCjZlO7Fha0UktyYvT3dlwu8lWtvKZ996ZUdLRkLMkYmn6jc58Mj6PEyvuIyeEB5hsZHA1UtWajiAkSWrsIYJESbQpFCDIMg9cF+PbFISwiMsNhY4l8Q9nwLYFajbKw5AUaQtFdYwIUIh4L219/2TfECQR8T3e1Ud38sAVoUg2My66aF1eUK6a4mVAq66UmaZpu4et5aQJ0qiDCDGndVKSyFBgxBqiLTdslM7h99h6EAkUeD3Pmlm7JYTO7lRQinCROi1U3Z5mAESA37/4/+WIEBGqN19iUCMomkE0C7/tf7qlSlsIsDvPzwvXXQ4Ss2DLsowfq7Pn+up/ienocAPfJo6h+YCgjWPQDMC2by/3k97Fvzws6Wsv/d5K5K38KWjLDuA9krP8y8Bv5y88K+WosPFF3r83QD44pENp2fqgZQkcABotB1nlu/5KxpW/bNVkPxqOWj+9R8t+PUPdW9zWQkD50tUnqyncn3g1aN/SxAEyvuSe/uzb9XDsGfAEQCHVMt5swN87+lxAW2bHzvKj+7eHiVwgqDcAW5i6PDV9zYcHqnv7VEC5+GOJrzNlf70awdOz5QDps84ilAHxDpW/bMtAJL60jgMns4xMyhvJMD5eNnEGJkrbgq4fsyISUBT09QJcDGDh1KNMNTNzM9NeXwCPCQmTBl47Pb4xOMTj1+1wCTUNU+PyR7XNKCxym2S3CbJbZLcOhaYZHXNpDT2Wf36DaSixnh50Fa8H3+uMkq+bnBTIajpSGF27nHlWw+Dq9w64Oq3HpLJtsIu0yTsjEUvwfN7peqzt1vm8QP9eXDX8u89PH9u4F6qph8F2QkLJoEbyRWCqquTEfpPHjlvGwN+r9DM2I7D/zPRvY2sDiqOk9Bvt+0PDr1rHw3j+OLec/BWyllFkvq7yMhl4UjdECpI8Mtxy1mre9j5P+1/nAE6rJiQ0OYAAAAASUVORK5CYII="/>
|
</div>
|
<div class="double_box_icon" style="background: linear-gradient(135deg,#f44327,#fa932b);">HOT</div>
|
</div>
|
</div>
|
<ex-nav></ex-nav>
|
<!-- <div class="h-150 text-white rounded-lg mt-34 flex items-center justify-center contNav"
|
@click="$router.push('/wantBuy')">
|
<img :src="require(`../assets/theme/${theme}/image/c2c1.png`)" alt="" class="w-96 h-96" />
|
<div class="c2cbg w-616 h-56 lh-56 font-30 pl-50 box-border"
|
:class="theme == 'dark' ? 'dark' : 'light'">{{
|
$t('C2C快捷交易') }}</div>
|
</div> -->
|
<list-quatation :listData="qList" @listSort="listSort" />
|
<!-- <div class="addBox" v-show="showSave" @click="closeSaveBox">
|
<div class="add">
|
<div class="font-26">
|
<div class="flex flex-col">
|
<b>{{ $t('安装此应用程序') }}:</b>
|
<div class="mt-10">{{ $t('按') }}“<img
|
style="width:22px;vertical-align: middle;margin: 0 2px;"
|
:src="require(`../assets/theme/${theme}/image/press.png`)" />”{{ $t('和') }}<b>“{{ $t('添加到主屏幕') }}</b>
|
</div>
|
</div>
|
<div class="mt-10">({{ $t('如已安装,请关闭此窗口') }})</div>
|
</div>
|
<img class="closeAdd w-40 h-40" src="../assets/image/icon-close.png" alt="">
|
<div class="jiao"></div>
|
</div>
|
</div> -->
|
</div>
|
<!-- <van-popup v-model="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
|
v-for="item in popupNewsList" :key="item.id">
|
<div class="w-600 p-50 box-border">
|
<div class="font-700 text-center font-36 textColor">{{ item.title }}</div>
|
<div class="flex justify-center mt-30" v-if="item.imgUrl"><img
|
:src="`${BASE_URL}public/showimg!showImg.action?imagePath=${item.imgUrl}`" class="w-200 h-200"
|
alt="" /></div>
|
<div class="py-36 textColor" v-html="item.content"></div>
|
<van-button color="#1D91FF" class="w-full h-80 rounded-full" type="info" @click="closePopNotice(item)">
|
{{ $t('我知道了') }}
|
</van-button>
|
</div>
|
</van-popup> -->
|
<!-- <van-popup
|
v-model="isshow"
|
style="border-radius: 10px"
|
|
>
|
<div class="w-600 p-50 box-border">
|
<div class="font-700 text-center font-36 textColor">
|
提示
|
</div>
|
<div class="flex justify-center " >
|
</div>
|
<div class="py-36 textColor" >此项目均为吉星科技出品认准技术✈️号：
|
<div >商务2:@jixingkj05</div>
|
<div >商务3:@jixingkj06</div>
|
<div>非我司认准均为骗子，禁止盗用我司演示，谨防受骗上当！</div>
|
</div>
|
|
<van-button
|
color="#1D91FF"
|
class="w-full h-80 rounded-full"
|
type="info"
|
@click="closeclick"
|
>
|
{{ $t("我知道了") }}
|
</van-button>
|
</div>
|
</van-popup> -->
|
</div>
|
</template>
|
<script>
|
import {
|
Popup,
|
Swipe,
|
SwipeItem
|
} from "vant";
|
import IoeSwiper from "@/components/ioe-swiper";
|
import ListQuatation from "@/components/list-quotation";
|
import {
|
mapGetters,
|
mapActions
|
} from "vuex";
|
import {
|
TIME_OUT
|
} from "@/config";
|
import {
|
SET_COIN_LIST
|
} from '@/store/const.store'
|
import {
|
_getHomeList
|
} from '@/API/home.api'
|
import ExHeader from "@/components/ex-header/index.vue";
|
import ExNav from "@/components/ex-nav/index.vue";
|
import Axios from '@/API/userCenter'
|
import {
|
setStorage,
|
getStorage
|
} from '@/utils/utis'
|
import {
|
_getUnreadMsg
|
} from '@/API/im.api'
|
import {
|
BASE_URL
|
} from "@/config";
|
export default {
|
name: "HomePage",
|
components: {
|
IoeSwiper,
|
ListQuatation,
|
ExHeader,
|
ExNav,
|
[Popup.name]: Popup,
|
[Swipe.name]: Swipe,
|
[SwipeItem.name]: SwipeItem,
|
},
|
// async created() {
|
// // this.init();
|
// // this.checkingMesk();
|
// // this.connectWallet()
|
// // await this.fetchQList()
|
// },
|
computed: {
|
...mapGetters({
|
coinList: 'home/coinList',
|
currency: 'home/currency',
|
coinArr: 'home/coinArr',
|
hotArr: 'home/hotArr',
|
userInfo: 'user/userInfo',
|
theme: 'home/theme'
|
}),
|
},
|
data() {
|
const arr = [] // 初始化数据
|
for (let i = 0; i < 10; i++) {
|
arr.push({
|
id: i
|
})
|
}
|
return {
|
isshow:true,
|
currentSwitch: 1,
|
switchBtns: ['ETL', '数字货币', '外汇', '期权'],
|
BASE_URL,
|
account: "",
|
hList: arr.slice(0, 3), // 热门
|
qList: arr, // 行情列表
|
active: 0,
|
timeout: null,
|
loading: true,
|
announceTitle: '',
|
announceId: '',
|
announceList: [],
|
socket: null,
|
showSave: false,
|
unreadMsg_timer: null,
|
unreadMsg_num: '',
|
popupNewsList: [],
|
sortVal: 0
|
|
}
|
},
|
methods: {
|
...mapActions('home', [SET_COIN_LIST]),
|
fetchUnread() { // 获取未读
|
_getUnreadMsg().then(unread_num => {
|
this.unreadMsg_num = (unread_num * 1 > 0) ? unread_num * 1 : '';
|
//console.log('\n *** \n'+unread_num*1+'\n *** \n')
|
})
|
},
|
closeclick(){
|
this.isshow = false
|
},
|
listSort(val) {
|
this.sortVal = val
|
},
|
async fetchQList() { // 获取行情
|
const list = await _getHomeList(this.coinArr.join(',')).catch(() => {
|
this.timeout = setTimeout(() => {
|
this.fetchQList()
|
}, 1000)
|
})
|
if (!(list instanceof Array)) {
|
return
|
}
|
this.loading = false
|
// this.qList = list.slice(0,10);
|
this.qList = list;
|
this.hList = list.filter(item => this.hotArr.includes(item.symbol));
|
//排序
|
if (this.sortVal == 1) {
|
this.qList = this.qList.sort(this.sortLetterList("symbol"))
|
}
|
if (this.sortVal == 2) {
|
this.qList = this.qList.sort(this.sortLetterTwoList("symbol"))
|
}
|
if (this.sortVal == 3) {
|
this.qList = this.qList.sort(this.orderListAsc("close", "ask"))
|
}
|
if (this.sortVal == 4) {
|
this.qList = this.qList.sort(this.orderListAsc("close"))
|
}
|
if (this.sortVal == 5) {
|
this.qList = this.qList.sort(this.orderListAsc("change_ratio"))
|
}
|
if (this.sortVal == 6) {
|
this.qList = this.qList.sort(this.orderListAsc("change_ratio", "ask"))
|
}
|
|
if (this.hList.length == 4) {
|
this.hList.pop()
|
}
|
if (this.timeout) {
|
clearTimeout(this.timeout)
|
}
|
this.timeout = setTimeout(async () => {
|
console.log('fetchQList')
|
await this.fetchQList()
|
}, TIME_OUT)
|
},
|
//字母排序
|
sortLetterList(propertyName) {
|
return function sortList(object1, object2) {
|
const value1 = object1[propertyName];
|
const value2 = object2[propertyName];
|
if (value2 < value1) {
|
return 1;
|
}
|
if (value2 > value1) {
|
return -1;
|
}
|
return 0;
|
};
|
},
|
sortLetterTwoList(propertyName) {
|
return function sortList(object1, object2) {
|
const value1 = object1[propertyName];
|
const value2 = object2[propertyName];
|
if (value2 > value1) {
|
return 1;
|
}
|
if (value2 < value1) {
|
return -1;
|
}
|
return 0;
|
};
|
},
|
//数字排序
|
orderListAsc(filed, type = "asc") {
|
return (a, b) => {
|
if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
|
return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
|
};
|
},
|
getNews() {
|
Axios._getNewsList1({
|
language: this.$i18n.locale,
|
}).then(res => {
|
this.announceList = res.data
|
this.isshow = true
|
})
|
},
|
getPopupNews() {
|
Axios._getPopupNews({
|
token: this.userInfo.token,
|
language: this.$i18n.locale,
|
}).then(res => {
|
if (res.data.length) {
|
if (!getStorage('popNotice')) {
|
let list = res.data
|
list.forEach(item => {
|
item.showPopUp = true
|
})
|
this.popupNewsList = list
|
}
|
}
|
})
|
},
|
closePopNotice(item) {
|
item.showPopUp = false
|
setStorage('popNotice', true)
|
},
|
toAnnounceDetail(announceId) {
|
if (announceId) {
|
this.$router.push({
|
name: 'AnnounceDetail',
|
query: {
|
id: announceId
|
}
|
})
|
}
|
},
|
getIsSave() {
|
var issafariBrowser = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
|
if (issafariBrowser) {
|
if (getStorage(`${this.TITLE}addtoClosed`)) {
|
this.showSave = false;
|
} else {
|
this.showSave = true
|
}
|
} else {
|
this.showSave = false
|
}
|
var isFull = window.navigator.standalone;
|
if (isFull) {
|
this.showSave = false
|
}
|
},
|
closeSaveBox() {
|
setStorage(`${this.TITLE}addtoClosed`, 1)
|
this.showSave = false
|
},
|
onClickLeft() {},
|
onClickRight() {},
|
startTimeout() {
|
this.clearTimeout()
|
this.fetchQList()
|
},
|
clearTimeout() {
|
if (this.timeout) {
|
clearTimeout(this.timeout)
|
this.timeout = null
|
}
|
},
|
},
|
async created() {
|
this.getIsSave();
|
this.getNews();
|
this.getPopupNews()
|
await this.SET_COIN_LIST()
|
this.startTimeout()
|
},
|
async activated() {
|
this.getNews()
|
this.getPopupNews()
|
await this.SET_COIN_LIST()
|
this.startTimeout()
|
if (this.userInfo.token) {
|
this.fetchUnread()
|
this.unreadMsg_timer = setInterval(() => {
|
this.fetchUnread()
|
}, 5000);
|
} else {
|
this.unreadMsg_num = ''
|
}
|
},
|
deactivated() {
|
this.clearTimeout()
|
if (this.unreadMsg_timer) {
|
clearInterval(this.unreadMsg_timer);
|
this.unreadMsg_timer = null;
|
}
|
},
|
beforeDestroy() {
|
this.clearTimeout()
|
if (this.unreadMsg_timer) {
|
clearInterval(this.unreadMsg_timer);
|
this.unreadMsg_timer = null;
|
}
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.double_box_icon{
|
position: absolute;
|
left: 80%;
|
top: 0;
|
width: 4.375rem;
|
height: 1.625rem;
|
background: #2b64fb;
|
font-size: 1.125rem;
|
font-family: PingFang TC;
|
font-weight: 400;
|
color: #fff;
|
line-height: 1.625rem;
|
text-align: center;
|
border-bottom-left-radius: 50%;
|
border-top-right-radius: .5625rem;
|
}
|
.double_box_left_right{
|
margin-right: 20px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.double_box_left{
|
display: flex;
|
justify-content: space-between;
|
}
|
.double_box_left_left_txt{
|
margin: 1.375rem 0 0 1.125rem;
|
font-size: 1.75rem;
|
font-family: PingFang TC;
|
font-weight: 600;
|
color: #000;
|
line-height: .8125rem;
|
}
|
.double_box_left_left_titlle{
|
font-size: 1.5rem;
|
font-family: PingFang TC;
|
font-weight: 400;
|
color: #606664;
|
line-height: 1.5;
|
margin: 1.1875rem 1.125rem 0 1.125rem;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.double_box_left{
|
box-sizing: border-box;
|
display: flex;
|
width: 22.8125rem;
|
height: 8.625rem;
|
border-radius: .5625rem .5625rem .5625rem .5625rem;
|
border: 1px solid #f2f2f2;
|
position: relative;
|
}
|
.double{
|
// width: 100%;
|
margin: 30px 30px 0 30px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.double_box_left_right_img{
|
width: 4rem;
|
height: 3.625rem;
|
margin-top: -.625rem;
|
}
|
.home {
|
width: 100%;
|
box-sizing: border-box;
|
padding: 0 0 108px;
|
|
@include themify() {
|
background: themed("home_bg");
|
}
|
|
::v-deep .van-cell {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .ex-tabs .active {
|
color: #fff;
|
}
|
}
|
|
.box {
|
width: 100px;
|
height: 100px;
|
background: red;
|
font-size: 25px;
|
}
|
|
.van-notice-bar {
|
padding: 0;
|
}
|
|
.notice-swipe {
|
height: 82px;
|
line-height: 82px;
|
}
|
|
.buyBox {
|
background: #F6F6F6;
|
width: 100%;
|
height: 132px;
|
border-radius: 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-left: 43px;
|
padding-right: 40px;
|
margin-bottom: 44px;
|
box-sizing: border-box;
|
|
.left {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
|
.leftBox {
|
width: 104px;
|
height: 88px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.leftCont {
|
margin-left: 40px;
|
|
p {
|
font-size: 30px;
|
color: #21262F;
|
font-weight: 600;
|
line-height: 36px;
|
}
|
|
span {
|
color: #868D9A;
|
font-size: 22px;
|
line-height: 30px;
|
}
|
}
|
|
.right {
|
width: 53px;
|
height: 53px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.quickly {
|
width: 100%;
|
height: 144px;
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 32px;
|
|
.quickBox {
|
width: 368px;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-right: 40px;
|
padding-left: 16px;
|
|
.left {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
|
.leftBox {
|
width: 80px;
|
height: 80px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.leftCont {
|
margin-left: 24px;
|
|
p {
|
font-size: 24px;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
|
font-weight: 600;
|
line-height: 36px;
|
}
|
}
|
|
.right {
|
width: 48px;
|
height: 48px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.chongbi {
|
background: url('../assets/theme/light/image/chongb.png');
|
background-size: cover;
|
|
&.dark {
|
background: url('../assets/theme/dark/image/chongb.png');
|
background-size: cover;
|
}
|
}
|
|
.tibi {
|
background: url('../assets/theme/light/image/tib.png');
|
background-size: cover;
|
|
&.dark {
|
background: url('../assets/theme/dark/image/tib.png');
|
background-size: cover;
|
}
|
}
|
}
|
|
.addBox {
|
border-radius: 10px;
|
width: 540px;
|
height: 200px;
|
font-size: 15px;
|
|
@include themify() {
|
background: themed("text_color");
|
}
|
|
position: fixed;
|
bottom: 70px;
|
left: 50%;
|
margin-left: -270px;
|
z-index: 1000;
|
|
.add {
|
padding: 30px;
|
box-sizing: border-box;
|
height: 100%;
|
position: relative;
|
|
@include themify() {
|
color: themed("main_background");
|
}
|
|
.closeAdd {
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
}
|
|
.jiao {
|
position: absolute;
|
bottom: -76px;
|
width: 0;
|
height: 0;
|
left: 240px;
|
border: 30px solid transparent;
|
|
@include themify() {
|
border-top: 50px solid themed("text_color");
|
}
|
|
}
|
}
|
|
}
|
|
.c2cbg {
|
background: url('../assets/theme/dark/image/c2c2.png') no-repeat;
|
background-size: cover;
|
|
&.light {
|
background: url('../assets/theme/light/image/c2c2.png') no-repeat;
|
background-size: cover;
|
}
|
}
|
|
.van-notice-bar {
|
height: 60px;
|
}
|
|
.notice-swipe {
|
height: 60px;
|
line-height: 60px;
|
}
|
|
.home-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 48px;
|
padding-top: 32px;
|
|
|
&-left {
|
font-weight: 600;
|
font-size: 36px;
|
line-height: 28px;
|
color: #FFFFFF;
|
margin-left: 20px;
|
}
|
|
&-right {
|
.img {
|
width: 36px;
|
height: auto;
|
margin-right: 20px;
|
}
|
}
|
}
|
|
.home-switch {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #FFFFFF;
|
margin-top: 32px;
|
font-family: 'PingFang HK';
|
height: 65px;
|
|
&-list {
|
flex: 1;
|
font-weight: 300;
|
text-align: center;
|
font-size: 20px;
|
position: relative;
|
}
|
|
.active {
|
font-weight: 600;
|
font-size: 28px;
|
}
|
|
.triangle {
|
position: absolute;
|
bottom: -16px;
|
left: 50%;
|
width: 10px;
|
transform: translatex(-50%);
|
}
|
}
|
</style>
|
