12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700 |
- <template>
- <view class="match">
- <view class="match-head">
- <div class="search-box">
- <div class="search" @click="toSearch">
- <img class="icon" src="/static/image/search-icon.svg" alt="">
- <div>
- <!-- Search for tours and teams... -->
- {{ $t('match.lab86') }}
- </div>
- </div>
- </div>
- <div class="filter-box">
- <div class="box">
- <div class="item-box" id="item-box">
- <div class="item item1" :class="{'active': match_live !== 0}" @click="matchLiveShow = true">
- <img class="icon" v-show="match_live == 0" src="/static/image/match/video.svg" alt="">
- <img class="icon" v-show="match_live !== 0" src="/static/image/match/video-a.svg" alt="">
- <!-- Streaming -->
- {{ $t('match.lab87') }}
- <img class="down" v-show="match_live == 0" src="/static/image/match/expert_down_ico.svg" alt="">
- <img class="down" v-show="match_live !== 0" src="/static/image/match/expert_down_ico_a.svg" alt="">
- </div>
- <div class="border"></div>
- <div v-for="item in tagActiveList" :key="item.id" class="item" :class="{'active': selectArr.indexOf(item.id) !== -1}" @click="selectedTag(item.id)">
- {{ item.name }}
- </div>
- </div>
- <div class="tours" @click="showSelectMask">
- <div class="number-box" v-if="selectArr.length">{{ selectArr.length }}</div>
- <!-- Tours -->
- {{ $t('match.lab88') }}
- <img class="down" src="/static/image/match/expert_down_ico.svg" alt="">
- </div>
- </div>
- <div class="box1">
- <div class="left">
- <div class="bold">{{ formatDate1(titleDate) }}</div>
- <div v-if="titleDate">- {{ formatDate(titleDate) }}</div>
- </div>
- <div class="right">
- <div class="live-now" :class="{'active': live == 1}" @click="checkLive">
- <!-- Live Now -->
- {{ $t('match.labe6') }}
- </div>
- <div class="date-box" :class="{active: nowDate != targetDate}" @click="dateShowChange">
- <img class="icon" v-show="nowDate != targetDate" src="/static/image/match/icon_Calendar.png" alt="">
- <img class="icon" v-show="nowDate == targetDate" src="/static/image/match/icon_Calendar.svg" alt="">
- <!-- Calendar -->
- {{ $t('match.lab89') }}
- </div>
- </div>
- </div>
- </div>
- </view>
- <!-- 列表 -->
- <scroll-view
- class="scroll"
- :scroll-y="true"
- :refresher-enabled="refresherEnabled"
- :refresher-triggered="triggered"
- :refresher-threshold="100"
- :scroll-top="scrollTop"
- @scroll="scroll"
- @refresherpulling="onPulling"
- @refresherrefresh="onRefresh"
- @scrolltolower="scrolltolower"
- @refresherabort="onAbort"
- >
- <view class="match-list" id="match">
- <view
- class="match-list-ul"
- v-for="(item) in matchList"
- :key="item.item[0].day"
- :data-day="item.item[0].day"
- >
- <div class="day" :class="{'target-date': item.item[0].day == targetDate}"><div class="bold">{{ formatDate1(item.item[0].day) }}</div> - {{ formatDate(item.item[0].day) }}</div>
- <div class="list" v-for="list in item.item[0].list" :key="list.tournament_id">
- <div class="title" @click="toMatchList(list)">
- <view class="text-clamp">{{ list.name }}</view>
- <img class="icon" src="/static/image/match/next_ico.svg" alt="">
- </div>
- <div class="match-list" v-for="item1 in list.cricket_match" :key="item1.id">
- <div class="match-detail-box" @click="toDetail(item1)">
- <div class="match_num">{{ item1.match_num }}</div>
- <div class="detail-box">
- <div class="detail">
- <div class="home">
- <div class="left">
- <div class="row">
- <u--image :src="item1.home_logo || '/static/image/common/team.png'" shape="circle" width="40rpx" height="40rpx"></u--image>
- <div class="text-clamp">{{ item1.home_name }}</div>
- </div>
- <div class="row">
- <u--image :src="item1.away_logo || '/static/image/common/team.png'" shape="circle" width="40rpx" height="40rpx"></u--image>
- <div class="text-clamp">{{ item1.away_name }}</div>
- </div>
- </div>
- <div class="right">
- <div class="li-team-value" v-if="item1.home_display_score">
- <div class="value">{{ formaScore(item1.home_display_score) }}</div>
- <div class="value2" v-if="item1.home_display_score != '0/0(0)' && formaScore2(item1.home_display_score)" :class="{'r': item1.win_id == item1.away_id && item1.status == 2}">{{ formaScore2(item1.home_display_score) }}</div>
- <div class="value1" v-if="item1.home_display_score != '0/0(0)'" :class="{'r': item1.win_id == item1.away_id && item1.status == 2}">{{ formaScore1(item1.home_display_score) }}</div>
- <u-icon v-if="item1.win_id == item1.home_id && item1.status == 2" name="play-left-fill" color="#DC3C23" size="11"></u-icon>
- </div>
- <div class="li-team-value" v-if="item1.away_display_score">
- <div class="value">{{ formaScore(item1.away_display_score) }}</div>
- <div class="value2" v-if="item1.away_display_score != '0/0(0)' && formaScore2(item1.away_display_score)" :class="{'r': item1.win_id == item1.home_id && item1.status == 2}">{{ formaScore2(item1.away_display_score) }} </div>
- <div class="value1" v-if="item1.away_display_score != '0/0(0)'" :class="{'r': item1.win_id == item1.home_id && item1.status == 2}">{{ formaScore1(item1.away_display_score) }}</div>
- <u-icon v-if="item1.win_id == item1.away_id && item1.status == 2" name="play-left-fill" color="#DC3C23" size="11"></u-icon>
- </div>
- </div>
- </div>
- </div>
- <!-- status 0未开始 1已开始 2已结束 -->
- <div class="state-box">
- <div class="status2" v-if="item1.status == 2">
- <!-- Completed -->
- {{ $t('match.lab90') }}
- </div>
- <template v-if="item1.status == 0">
- <div v-if="item1.live_time">
- <!-- Watch Live In -->
- {{ $t('match.lab91') }}
- </div>
- <div v-else>
- <!-- Watch Live in -->
- {{ $t('match.lab92') }}
- </div>
- <div v-if="item1.live_time" class="down">{{ item1.live_time }}</div>
- <div v-else class="status0"><span class="down">{{ watchLiveAt(item1.scheduled) }} </span><span>{{ watchLiveAt1(item1.scheduled) }}</span></div>
- </template>
- <template v-if="item1.status == 1">
- <div @click.stop="toDetail(item1, 1)" v-if="item1.match_live" class="match_live">
- <img class="icon" src="/static/image/match/play_icon.png" alt="">
- <!-- Watch Live -->
- {{ $t('match.lab93') }}
- </div>
- <div v-if="item1.live_id && item1.islive == 1" @click.stop="toDetail(item1, 2)" class="match_live">
- <img class="icon" src="/static/image/match/play_icon.png" alt="">
- <!-- L I V E -->
- {{ $t('match.lab94') }}
- </div>
- <div class="scores" v-if="!(item1.live_id && item1.islive == 1) && !item1.match_live">
- <div class="radius"></div>
- <!-- Live Scores -->
- {{ $t('match.lab95') }}
- </div>
- </template>
- </div>
- </div>
- <div v-if="item1.match_result" class="ended">{{ item1.match_result }}</div>
- </div>
- </div>
- </div>
- </view>
- <u-loadmore
- v-if="matchList.length != 0 && !live && !selectArr.length && match_live == 0"
- :status="status"
- fontSize="28"
- :line="true"
- :loading-text="statusType.loadingText"
- :loadmore-text="statusType.loadmoreText"
- :nomore-text="statusType.nomoreText"
- />
- </view>
- <div class="skeleton" v-if="!matchList.length && status == 'loading'">
- <div class="list">
- <div class="item-header"></div>
- <div class="item-body">
- <div class="item">
- <div class="row">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- <div class="row">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- </div>
- <div class="item">
- <div class="row">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- <div class="row">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="list">
- <div class="item-header"></div>
- <div class="item-body">
- <div class="item">
- <div class="row">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- <div class="row">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- </div>
- <div class="item">
- <div class="row">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- <div class="row">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="no-data" v-show="!matchList.length && status == 'loadmore'">
- <img class="e_img" src="/static/image/match/no_data.jpg" alt="">
- <div class="text">
- <!-- No search results for this filter -->
- {{ $t('match.lab96') }}
- </div>
- <div class="reset-box">
- <div class="btn" @click="reset">
- <!-- RESET FILTERS -->
- {{ $t('match.lab97') }}
- </div>
- </div>
- </div>
- </scroll-view>
- <u-calendar
- class="calendar"
- :maxDate="maxDate"
- :showSubtitle="false"
- :title="$t('match.la31')"
- :defaultDate="defaultDate"
- color="#DC3C23"
- :rowHeight="114"
- confirmText="Confirm"
- :formatter="formatter"
- :minDate="minDate"
- :show="dateShow"
- @monthSelected="monthSelected"
- @close="dateClose"
- @confirm="dateConfirm">
- </u-calendar>
- <u-popup
- :show="selectMask"
- mode="bottom"
- :round="20"
- @close="selectMask = false"
- >
- <view class="tag_popup_box" @touchmove.stop="">
- <view class="top">
- <img class="left_img" src="/static/image/match/left.png" @click="selectMask = false" alt="">
- <u--input
- :placeholder="$t('match.lab98')"
- v-model="tournamentName"
- prefixIcon="search"
- prefixIconStyle="font-size: 28px;color: #909399"
- ></u--input>
- <img class="close" src="/static/image/common/warn.png" @click="selectMask = false" alt="">
- </view>
- <view class="list" v-if="tournamentListFilter.length">
- <view
- class="li font28 flex"
- v-for="(item) in tournamentListFilter"
- :key="item.tournament_id"
- @click="checkboxChange(item.tournament_id)"
- >
- <text>{{ item.name }}</text>
- <img class="img" :src="selectArrPopup.indexOf(item.tournament_id) != -1 ? '/static/image/match/match_selected.png' : '/static/image/match/match_notselected.png'">
- </view>
- </view>
- <div class="no-tag-box" v-else>
- <img class="no" src="/static/image/match/no_tag.png" alt="">
- <div class="found">
- <!-- Nothing found! -->
- {{ $t('match.lab99') }}
- </div>
- <div class="text">
- <!-- Please try searching again -->
- {{ $t('match.labe') }}
- </div>
- </div>
- <view class="foot flex-around" v-if="tournamentListFilter.length">
- <view class="btn" @click="selectArrPopup = []">
- <!-- Clear All -->
- {{ $t('match.labe1') }}
- </view>
- <view class="btn1" @click="saveOptions">
- <!-- Save Options -->
- {{ $t('match.labe2') }}
- </view>
- </view>
- </view>
- </u-popup>
- <u-popup
- :show="matchLiveShow"
- mode="bottom"
- :round="20"
- @close="matchLiveShow = false"
- >
- <view class="match_live_box" @touchmove.stop="">
- <div class="item" @click="selectMatchLive(0)">
- <!-- All matches(Non-streaming & Streaming) -->
- {{ $t('match.labe3') }}
- <div class="radius">
- <div v-if="match_live == 0" class="radius-active"></div>
- </div>
- </div>
- <div class="item" @click="selectMatchLive(2)">
- <!-- Anchor explanation -->
- {{ $t('match.labe4') }}
- <div class="radius">
- <div v-if="match_live == 2" class="radius-active"></div>
- </div>
- </div>
- <div class="item" @click="selectMatchLive(1)">
- <!-- Streaming on OneCric -->
- {{ $t('match.labe5') }}
- <div class="radius">
- <div v-if="match_live == 1" class="radius-active"></div>
- </div>
- </div>
- </view>
- </u-popup>
- <div @click="goTop" :class="getTopClass()" class="to-top" v-if="((!hasNowDate) || (titleDate && titleDate != nowDate)) && matchList.length">
- <u-icon name="arrow-left-double" color="#fff"></u-icon>
- </div>
- <div class="news-install">
- <install></install>
- </div>
- </view>
- </template>
- <script>
- import install from "@/components/install/install.vue";
- import { deepCopy } from '@/utils/common-utils';
- export default {
- components: {
- install,
- },
- data() {
- const d = new Date()
- const year = d.getFullYear()
- let month = d.getMonth() + 1
- month = month < 10 ? `0${month}` : month
- const date = d.getDate()
- return {
- value: [],
- streaming: 0,
- status: "loadmore",
- selectMask: false,
- homeShow: false,
- timer: null,
- intervalTimer: null,
- defaultDate: null,
- statusType: {
- loadingText: this.$t('common.lab'),
- loadmoreText: this.$t('common.lab1'),
- nomoreText: this.$t('common.lab2')
- },
- matchList: [],
- tournamentList: [],
- tournamentName: '',
- triggered: false,
- _freshing: false,
- selectArr: [],
- selectArrPopup: [],
- live: 0,
- match_live: 0,
- tagList: [],
- targetDate: '',
- nowDate: '',
- hasNowDate: true,
- nextDate: '',
- preDate: '',
- dateShow: false,
- matchLiveShow: false,
- scrollTop: 0,
- old: {
- scrollTop: 0
- },
- titleDate: '',
- targetDateScrollTop: 0,
- maxDate: `${year}-${month}-${date + 15}`,
- minDate: `${year}-${month}-${date - 15}`,
- };
- },
- computed: {
- refresherEnabled() {
- if (this.match_live !== 0) {
- return false
- }
- if (this.live == 1) {
- return false
- }
- if (!this.matchList[0]) {
- return false
- }
- return true
- },
- tagActiveList() {
- let list = [];
- list = this.tagList.filter(item => {
- return this.selectArr.indexOf(item.id) !== -1
- })
- list = list.concat(this.tagList.filter(item => {
- return this.selectArr.indexOf(item.id) === -1
- }))
- return list
- },
- tournamentListFilter() {
- return this.tournamentList.filter(item => {
- return item.name.toLowerCase().indexOf(this.tournamentName.toLowerCase()) !== -1
- })
- },
- info() {
- return this.$store.state.info;
- },
- isLogin() {
- return this.$store.state.isLogin;
- },
- },
- created() {
- if (sessionStorage.getItem('match_live')) {
- this.matchLiveLoad()
- } else {
- this.targetDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
- this.get_Cricket_match(true);
- }
- this.get_cricket_tag();
- this.get_cricket_tournament();
- this.intervalTimer = setInterval(() => {
- if (this.matchList.length) {
- this.get_live_Cricket_match()
- }
- }, 10000)
- },
- activated() {
- if (sessionStorage.getItem('match_live')) {
- this.matchLiveLoad()
- }
- this.intervalTimer = setInterval(() => {
- if (this.matchList.length) {
- this.get_live_Cricket_match()
- }
- }, 10000)
- },
- deactivated() {
- clearInterval(this.intervalTimer)
- this.intervalTimer = null
- },
- methods: {
- setList() {
- let num = this.streaming;
- this.streaming = num == 1 ? 0 : 1;
- this.get_Cricket_match();
- },
- // 获取公开赛列表
- get_cricket_tournament() {
- uni.$u.http
- .post("/api/Cricket/get_cricket_tournament", {})
- .then((res) => {
- this.tournamentList = res;
- })
- .catch((res) => {});
- },
- // 联赛-标签
- get_cricket_tag() {
- uni.$u.http
- .post("/api/Cricketnew/get_cricket_tag", {})
- .then((res) => {
- this.tagList = res
- })
- .catch((res) => {});
- },
- /* 获取板球列表 */
- get_Cricket_match(reset, d) {
- this.status = "loading";
- let time = new Date();
- let timeZone = time.toLocaleTimeString("en-us", {
- timeZoneName: "short",
- }); //'1:12:38 PM GMT+8'
- let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
- let selectArr = this.selectArr.join(',');
- this.nowDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
- if (this.nowDate == d) {
- this.hasNowDate = true
- }
- uni.$u.http
- .post("/api/Cricketnew/cricket_match_day", {
- timezone: timeZoneId,
- date: d || this.targetDate,
- live: this.live,
- tag: selectArr,
- match_live: this.match_live
- })
- .then((res) => {
- if (reset) {
- let matchList = [];
- (res.item || []).forEach(a => {
- matchList.push({
- end_day: res.end_day,
- front_day: res.front_day,
- item: [a]
- })
- })
- this.matchList = matchList;
- this.$nextTick(() => {
- this.scrollTop = this.old.scrollTop
- this.$nextTick(()=>{
- this.scrollTop = 0
- });
- this.getDateTitle()
- var div = document.querySelectorAll('.match-list-ul')
- //最终结果
- div.forEach(item => {
- let distance = item.offsetTop + this.getTop(item.parentElement)
- if (this.hasNowDate) {
- if (item.getAttribute('data-day') == this.nowDate) {
- this.targetDateScrollTop = distance
- }
- } else {
- if (item.getAttribute('data-day') == this.targetDate) {
- this.targetDateScrollTop = distance
- }
- }
- })
- })
- } else {
- if (d == this.preDate) {
- let titleDate = this.titleDate
- uni.stopPullDownRefresh();
- let matchList = [];
- (res.item || []).forEach(a => {
- matchList.push({
- end_day: res.end_day,
- front_day: res.front_day,
- item: [a]
- })
- })
- this.matchList = matchList.concat(this.matchList);
- this.$nextTick(() => {
- var div = document.querySelectorAll('.match-list-ul')
- div.forEach(item => {
- let distance = item.offsetTop + this.getTop(item.parentElement)
- if (item.getAttribute('data-day') == titleDate) {
- this.targetDateScrollTop = distance
- }
- })
- this.scrollTop = (this.targetDateScrollTop - 90)
- })
- } else {
- if (res) {
- let matchList = [];
- (res.item || []).forEach(a => {
- matchList.push({
- end_day: res.end_day,
- front_day: res.front_day,
- item: [a]
- })
- })
- this.matchList = this.matchList.concat(matchList);
- }
- this.$nextTick(() => {
- this.getDateTitle()
- var div = document.querySelectorAll('.match-list-ul')
- //最终结果
- div.forEach(item => {
- let distance = item.offsetTop + this.getTop(item.parentElement)
- if (this.hasNowDate) {
- if (item.getAttribute('data-day') == this.nowDate) {
- this.targetDateScrollTop = distance
- }
- } else {
- if (item.getAttribute('data-day') == this.targetDate) {
- this.targetDateScrollTop = distance
- }
- }
- })
- })
- }
- }
- if (this.timer) {
- clearInterval(this.timer)
- this.timer = null
- }
- this.countdown1()
- this.timer = setInterval(this.countdown, 1000)
- document.getElementById('item-box').scrollLeft=0;
- if (this.selectMask) {
- this.selectMask = false;
- }
- }).finally(() => {
- this.triggered = false
- this._freshing = false;
- this.status = "loadmore";
- })
- .catch((res) => {});
- },
- toMatchList(item) {
- uni.navigateTo({
- url:`./match-list?title=${item.name}&id=${item.tournament_id}&type=${item.type}${item.cricket_match.length != 0 ? ('&matchid=' + item.cricket_match[0].id): ''}`
- })
- },
- toSearch() {
- uni.navigateTo({
- url:`./search`
- })
- },
- close(event) {
- this.homeShow = false;
- },
- countdown1() {
- var matchList = this.matchList
- matchList.forEach(item => {
- if (item.item && item.item[0] && item.item[0].list) {
- item.item[0].list.forEach(a => {
- a.cricket_match && a.cricket_match.forEach(item1 => {
- if (item1.match_result == null) {
- item1.match_result = ''
- }
- item1.live_time_unix = new Date(item1.todaystart.replace(new RegExp(/-/gm), "/")).getTime() - new Date().getTime()
- if (item1.live_time_unix > 0 && item1.live_time_unix < (1000 * 60 * 60 * 3)) {
- item1.live_time = this.$common.countdownFun(item1.live_time_unix / 1000)
- } else {
- item1.live_time = null
- }
- if (item1.live_time_unix == 0) {
- item1.status = 1
- }
- })
- })
- }
- })
- this.$set(this, 'matchList', matchList)
- },
- countdown() {
- var matchList = this.matchList
- matchList.forEach(item => {
- if (item.item && item.item[0] && item.item[0].list) {
- item.item[0].list.forEach(a => {
- a.cricket_match && a.cricket_match.forEach(item1 => {
- if (item1.match_result == null) {
- item1.match_result = ''
- }
- if (item1.live_time_unix > 0 && item1.live_time_unix < (1000 * 60 * 60 * 3)) {
- item1.live_time_unix = item1.live_time_unix - 1000
- item1.live_time = this.$common.countdownFun(item1.live_time_unix / 1000)
- } else {
- item1.live_time = null
- }
- if (item1.live_time_unix == 0) {
- item1.status = 1
- }
- })
- })
- }
- })
- this.$set(this, 'matchList', matchList)
- },
- get_live_Cricket_match() {
- let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
- let selectArr = this.selectArr.join(',');
- let nowDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
- uni.$u.http
- .post("/api/Cricketnew/cricket_match_day", {
- timezone: timeZoneId,
- date: nowDate,
- live: this.live,
- tag: selectArr,
- match_live: this.match_live
- })
- .then((res) => {
- if (res.item[0] && res.item[0].list&& res.item[0].list[0]) {
- let obj = {}
- res.item[0].list.forEach(item => {
- (item.cricket_match || []).forEach(m => {
- obj[m.id] = m
- })
- })
- let matchList = deepCopy(this.matchList)
- matchList.forEach((item, index1) => {
- if (item.item && item.item[0] && item.item[0].list) {
- item.item[0].list.forEach((a, index2) => {
- a.cricket_match && a.cricket_match.forEach((item1, index3) => {
- if (obj[item1.id]) {
- obj[item1.id].live_time = item1.live_time
- item1 = obj[item1.id]
- a.cricket_match[index3] = item1
- }
- })
- })
- }
- })
- matchList.forEach(item => {
- if (item.item && item.item[0] && item.item[0].list) {
- item.item[0].list.forEach(a => {
- a.cricket_match && a.cricket_match.forEach(item1 => {
- item1.live_time_unix = new Date(item1.todaystart.replace(new RegExp(/-/gm), "/")).getTime() - new Date().getTime()
- if (item1.live_time_unix > 0 && item1.live_time_unix < (1000 * 60 * 60 * 3)) {
- item1.live_time = this.$common.countdownFun(item1.live_time_unix / 1000)
- } else {
- item1.live_time = null
- }
- if (item1.live_time_unix == 0) {
- item1.status = 1
- }
- })
- })
- }
- })
- this.matchList = matchList
- }
- })
- .catch((res) => {});
- },
- toDetail(item, type) {
- if (type == 1) {
- this.$toUrl('./match-detail?id=' + item.id + '&animation=1')
- return
- }
- if (type == 2) {
- this.$toUrl('/pages/Live/live-detail?ID=' + item.live_id)
- return
- }
- if(item.status == 1) {
- this.$toUrl(`./match-detail?id=${item.id}&live=1`)
- return
- }
- this.$toUrl('./match-detail?id=' + item.id)
- },
- open(event) {},
- onPulling(e) {
- },
- onRefresh() {
- if (this._freshing) return;
- this.triggered = true
- this._freshing = true;
- this.preDate = this.matchList[0].front_day
- this.get_Cricket_match(false, this.preDate);
- },
- scrolltolower() {
- if (this.live || this.selectArr.length || !this.matchList[this.matchList.length - 1] || this.match_live !== 0) {
- return
- }
- if (this.status == "loadmore") {
- this.nextDate = this.matchList[this.matchList.length - 1].end_day
- this.get_Cricket_match(false, this.nextDate);
- }
- },
- scroll(e) {
- // console.error(e)
- this.old.scrollTop = e.detail.scrollTop
- this.getDateTitle()
- },
- getDateTitle() {
- var div = document.querySelectorAll('.match-list-ul')
- //最终结果
- let hasNowDate = false
- div.forEach(item => {
- if (item.getAttribute('data-day') == this.nowDate) {
- hasNowDate = true
- }
- let distance = item.offsetTop + item.offsetHeight
- if ((this.old.scrollTop - distance) < -100 && this.old.scrollTop >= item.offsetTop) {
- this.titleDate = item.getAttribute('data-day')
- }
- })
- this.hasNowDate = hasNowDate
- },
- getTop(dom, distance) {
- distance = distance || 0
- //可以使用dom.style.positin 但style只能获取到行内属性会出现获取不到属性值返回空字符串
- //getComputedStyle会输出最终应用于该element上的最终样式 IE9+支持
- //currentStyle IE老版本支持
- if (['relative','absolute','fixed'].includes(getComputedStyle(dom).position)) {
- distance += distance.offsetTop
- }
- if (dom.parentElement.nodeName === 'BODY' || !dom.parentElement) {
- return distance
- }
- return this.getTop(dom.parentElement, distance)
- },
- onAbort() {
- },
- monthSelected(e) {
- this.defaultDate = e
- },
- selectMatchLive(type) {
- this.matchLiveShow = false
- if (this.match_live == type) {
- return
- }
- this.targetDate = this.nowDate
- this.match_live = type
- this.get_Cricket_match(true);
- },
- reset() {
- this.live = 0;
- this.match_live = 0;
- this.selectArr = [];
- this.get_Cricket_match(true);
- },
- matchLiveLoad() {
- this.match_live = JSON.parse(sessionStorage.getItem('match_live'))
- this.targetDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
- this.get_Cricket_match(true);
- sessionStorage.removeItem('match_live')
- },
- checkLive() {
- if (this.status == "loading") {
- return
- }
- this.match_live = 0;
- this.targetDate = this.nowDate
- let selectArr = []
- this.tagActiveList.forEach(item => {
- if (this.selectArr.indexOf(item.id) !== -1) {
- selectArr.push(item.id)
- }
- })
- this.selectArr = selectArr
- this.live = this.live ? 0 : 1
- this.targetDate = this.$common.parseTime(new Date(), '{y}-{m}-{d}')
- this.get_Cricket_match(true)
- },
- selectedTag(id) {
- if (this.status == "loading") {
- return
- }
- if (this.selectArr.indexOf(id) === -1) {
- this.selectArr.push(id)
- } else {
- this.selectArr = this.selectArr.filter(item => {
- return item != id
- })
- }
- this.match_live = 0;
- this.live = 0
- this.targetDate = this.nowDate
- document.getElementById('item-box').scrollLeft=0;
- this.get_Cricket_match(true)
- },
- checkboxChange(id) {
- if (this.selectArrPopup.indexOf(id) === -1) {
- this.selectArrPopup.push(id)
- } else {
- this.selectArrPopup = this.selectArrPopup.filter(item => {
- return item != id
- })
- }
- },
- saveOptions() {
- this.selectArr = deepCopy(this.selectArrPopup)
- this.targetDate = this.nowDate
- this.selectMask = false
- this.get_Cricket_match(true)
- },
- showSelectMask() {
- this.selectMask = true
- this.tournamentName = ''
- this.selectArrPopup = deepCopy(this.selectArr)
- },
- dateConfirm(e) {
- this.targetDate = e[0]
- this.get_Cricket_match(true)
- this.dateShow = false
- },
- dateClose() {
- this.dateShow = false
- },
- dateShowChange() {
- this.dateShow = true
- this.defaultDate = [this.targetDate]
- },
- goTop(e) {
- if (!this.hasNowDate) {
- this.selectArr = [];
- this.match_live = 0;
- this.targetDate = this.nowDate
- this.get_Cricket_match(true, this.nowDate);
- return
- }
- var div = document.querySelectorAll('.match-list-ul')
- let scrollTop = 0
- div.forEach(item => {
- if (item.getAttribute('data-day') == this.nowDate) {
- scrollTop = item.offsetTop
- }
- })
- // 解决view层不同步的问题
- this.scrollTop = this.old.scrollTop
- this.$nextTick(()=>{
- this.scrollTop = scrollTop
- this.old.scrollTop = scrollTop
- this.getDateTitle()
- });
- },
- getTopClass() {
- if (new Date(this.titleDate.replace(new RegExp(/-/gm), "/")).getTime() < new Date(this.nowDate.replace(new RegExp(/-/gm), "/")).getTime()) {
- return 'down'
- }
- return 'up'
- },
- formatter(day) {
- const d = new Date()
- let month = d.getMonth() + 1
- const date = d.getDate()
- if(day.month == month && day.day == date)
- {
- day.bottomInfo = this.$t('match.tab2')
- }
- return day
- },
- watchLiveAt(value) {
- if (!value) {
- return ''
- }
- var date = new Date(value.replace(new RegExp(/-/gm), "/"));
- var hours = date.getHours();
- var minutes = date.getMinutes();
- if (hours != 12) {
- hours = hours % 12;
- }
- if (hours == 12 && minutes) {
- hours = hours % 12;
- }
- minutes = minutes < 10 ? '0' + minutes : minutes;
- hours = hours < 10 ? '0' + hours : hours;
- var strTime = hours + ':' + minutes;
- return strTime;
- },
- watchLiveAt1(value) {
- if (!value) {
- return ''
- }
- var date = new Date(value.replace(new RegExp(/-/gm), "/"));
- var hours = date.getHours();
- var minutes = date.getMinutes();
- var ampm = hours >= 12 ? "PM" : "AM";
- var strTime = ampm;
- if (minutes && hours == 12) {
- strTime = 'PM'
- }
- return strTime;
- },
- formaScore(v){
- if (v == '0/0(0)') {
- return 'Yet To Bat'
- }
- let s = v.replace("(", '(')
- let index = v.indexOf('(')
- return s.substring(index)
- },
- formaScore1(v){
- let s = v.replace("(", '(')
- let index = v.indexOf('(')
- let val = s.substring(0, index).split('&')
- if (val[1]) {
- return '&' + val[1]
- }
- return val[0]
- },
- formaScore2(v){
- let s = v.replace("(", '(')
- let index = v.indexOf('(')
- let val = s.substring(0, index).split('&')
- if (val[1]) {
- return val[0]
- }
- return ''
- },
- formatDate1(value) {
- if (!value) {
- return ''
- }
- var nowDate = new Date(this.$common.parseTime(new Date(), '{y}/{m}/{d}')).getTime();
- var date = new Date(value.replace(new RegExp(/-/gm), "/"));
- var weekNum = date.getDay()
- let week = ""
- switch (weekNum) {
- case 0:
- week = "Sunday";
- break;
- case 1:
- week = "Monday";
- break;
- case 2:
- week = "Tuesday";
- break;
- case 3:
- week = "Wednesday";
- break;
- case 4:
- week = "Thursday";
- break;
- case 5:
- week = "Friday";
- break;
- case 6:
- week = "Saturday";
- break;
- }
- var targetDate = date.getTime()
- if (nowDate - targetDate < 0 && nowDate - targetDate >= -(1000 * 60 * 60 * 24)) {
- week = this.$t('match.la33')
- }
- if (nowDate - targetDate > 0 && nowDate - targetDate <= (1000 * 60 * 60 * 24)) {
- week = this.$t('match.la32')
- }
- if (nowDate == targetDate) {
- week = this.$t('match.tab2')
- }
- return `${week}`;
- },
- formatDate(value) {
- if (!value) {
- return ''
- }
- var date = new Date(value.replace(new RegExp(/-/gm), "/"));
- var MonthNum = date.getMonth() + 1
- let Month = ''
- switch (MonthNum) {
- case 1:
- Month = "Jan";
- break;
- case 2:
- Month = "Feb";
- break;
- case 3:
- Month = "Mar";
- break;
- case 4:
- Month = "Apr";
- break;
- case 5:
- Month = "May";
- break;
- case 6:
- Month = "Jun";
- break;
- case 7:
- Month = "Jul";
- break;
- case 8:
- Month = "Aug";
- break;
- case 9:
- Month = "Sept";
- break;
- case 10:
- Month = "Oct";
- break;
- case 11:
- Month = "Nov";
- break;
- case 12:
- Month = "Dec";
- break;
- }
- let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
-
- return `${day} ${Month}`;
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- page {
- background-color: rgb(251, 251, 252);
- padding-bottom: var(--window-bottom);
- }
- .match-head {
- color: #fff;
- font-size: 28rpx;
- position: sticky;
- top: 0;
- z-index: 99;
- background-color: $color1;
- .match-install {
- color: #333;
- }
- }
- .search-box {
- padding: 22rpx 24rpx;
- color: #BBBBBB;
- font-size: 28rpx;
- .search {
- background-color: rgba(245,245,245,0.3);
- border-radius: 44rpx;
- height: 60rpx;
- display: flex;
- align-items: center;
- padding: 0 18rpx;
- }
- .icon {
- width: 28rpx;
- height: 28rpx;
- margin-right: 18rpx;
- }
- }
- .filter-box {
- background-color: #fff;
- .box {
- padding: 24rpx 0;
- position: relative;
- }
- .item-box {
- padding: 0 26rpx;
- display: flex;
- align-items: center;
- flex-wrap: nowrap;
- white-space: nowrap;
- word-break: keep-all;
- overflow: auto;
- .item {
- display: flex;
- align-items: center;
- line-height: 1;
- height: 52rpx;
- color: #333;
- font-size: 22rpx;
- border-radius: 30rpx;
- border: 1px solid #999999;
- padding: 0 20rpx;
- margin-right: 16rpx;
- &.item1 {
- padding: 0 13rpx;
- }
- &.active {
- color: #DC3C23;
- border-color: #DC3C23;
- }
- .icon {
- margin-right: 11rpx;
- height: 20rpx;
- width: 20rpx;
- }
- .down {
- margin-left: 9rpx;
- height: 16rpx;
- }
- }
- }
- .border {
- height: 40rpx;
- min-width: 1rpx;
- max-width: 1px;
- background-color: #CCCCCC;
- margin-right: 18rpx;
- }
- .tours {
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- height: 64rpx;
- padding-left: 20rpx;
- padding-right: 15rpx;
- display: flex;
- align-items: center;
- line-height: 1;
- color: #333;
- font-size: 22rpx;
- background-color: #fff;
- background: #FFFFFF;
- box-shadow: 4rpx 4rpx 8rpx 1rpx rgba(0,0,0,0.16);
- border-radius: 10rpx 0px 0px 10rpx;
- border: 1px solid #CCCCCC;
- .down {
- margin-left: 16rpx;
- height: 16rpx;
- }
- .number-box {
- margin-right: 9rpx;
- width: 34rpx;
- height: 26rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 18rpx;
- line-height: 1;
- color: #fff;
- background: #DC3C23;
- border-radius: 30rpx;
- }
- }
- .box1 {
- padding: 25rpx 24rpx 22rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- color: #333;
- .live-now {
- width: 120rpx;
- height: 40rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 30rpx;
- border: 1px solid #CCCCCC;
- line-height: 1;
- font-size: 22rpx;
- &.active {
- color: #DC3C23;
- border-color: #DC3C23;
- }
- }
- }
- .left {
- display: flex;
- align-items: center;
- font-size: 26rpx;
- line-height: 1;
- .bold {
- font-weight: bold;
- margin-right: 6rpx;
- }
- }
- .right {
- display: flex;
- align-items: center;
- }
- .date-box {
- display: flex;
- align-items: center;
- height: 36rpx;
- border-left: 1px solid #ccc;
- font-size: 28rpx;
- padding-left: 19rpx;
- margin-left: 22rpx;
- &.active {
- color: #FF3300;
- }
- .icon {
- width: 28rpx;
- margin-right: 10rpx;
- }
- }
- }
- .match-list {
- &+.match-list-ul {
- margin-top: 20rpx;
- }
- .match-list-ul {
- background-color: #fff;
- &+.match-list-ul {
- margin-top: 20rpx;
- }
- .day {
- font-size: 26rpx;
- color: #333;
- height: 77rpx;
- display: flex;
- align-items: center;
- padding: 0 24rpx;
- .bold {
- font-weight: bold;
- margin-right: 6rpx;
- }
- }
- .list {
- background-color: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
- border-bottom: 1px solid #F3F3F7;
- }
- .list + .list{
- margin-top: 22rpx;
- }
- .title {
- height: 80rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 24rpx;
- font-size: 30rpx;
- font-weight: bold;
- color: #333;
- background-image: url('/static/image/match/list-top-bg.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- .icon {
- width: 48rpx;
- }
- }
- .match-list {
- padding: 15rpx 25rpx 17rpx;
- &+.match-list {
- border-top: 1px solid #F3F3F7;
- }
- }
- .match-detail-box {
- padding: 20rpx 0 20rpx 19rpx;
- .match_num {
- margin-bottom: 10px;
- font-size: 22rpx;
- color: #999;
- }
- .detail-box {
- padding-right: 212rpx;
- position: relative;
- .detail {
- font-size: 24rpx;
- line-height: 40rpx;
- color: #333;
- font-weight: bold;
- border-right: 1px solid #F3F3F7;
- }
- .home {
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: relative;
- .row {
- display: flex;
- align-items: center;
- &+.row {
- margin-top: 32rpx;
- }
- }
- .left {
- flex: 1;
- min-width: 10%;
- max-width: 100%;
- .text-clamp {
- // padding-right: 14rpx;
- }
- }
- .u-icon {
- position: absolute;
- right: -6rpx;
- top: 50%;
- transform: translateY(-50%);
- }
- .u-transition {
- margin-right: 18rpx;
- }
- .li-team-value {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- line-height: 40rpx;
- padding-right: 16rpx;
- position: relative;
- &+.li-team-value {
- margin-top: 32rpx;
- }
- }
- .value {
- font-size: 22rpx;
- font-weight: 400;
- color: #666666;
- }
- .value2 {
- font-size: 24rpx;
- font-weight: bold;
- color: #999;
- margin-right: 3px;
- &.r {
- color: #666666;
- }
- }
- .value1 {
- font-size: 24rpx;
- font-weight: bold;
- color: #333;
- &.r {
- color: #666666;
- }
- }
- }
- }
- .state-box {
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- min-width: 212rpx;
- max-width: 212rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- font-size: 22rpx;
- line-height: 30rpx;
- font-weight: 400;
- .status2 {
- color: #999;
- }
- .status0 {
- display: flex;
- align-items: flex-end;
- line-height: 1;
- .down {
- margin-right: 8rpx;
- }
- }
- .down {
- font-size: 28rpx;
- font-weight: bold;
- }
- .match_live {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 160rpx;
- height: 50rpx;
- background-color: #DC3C23;
- border-radius: 40rpx;
- font-size: 22rpx;
- color: #fff;
- line-height: 1;
- font-weight: 400;
- &+.match_live {
- margin-top: 20rpx;
- }
- .icon {
- width: 19rpx;
- margin-right: 4px;
- }
- }
- .scores {
- color: #959DEE;
- display: flex;
- align-items: center;
- font-weight: bold;
- .radius {
- width: 6rpx;
- height: 6rpx;
- border-radius: 50%;
- background-color: #959DEE;
- margin-right: 7rpx;
- }
- }
- }
- .ended {
- font-size: 22rpx;
- line-height: 30rpx;
- font-weight: bold;
- color: #999;
- margin-top: 22rpx;
- }
- }
- }
- }
- .skeleton {
- background-color: #fff;
- .list {
- background-color: #fff;
- border-bottom: 1px solid #F3F3F7;
- &+.list {
- margin-top: 20rpx;
- }
- .item-header {
- background-color: #F3F3F7;
- height: 80rpx;
- }
- .item-body {
- padding: 6rpx 25rpx 0;
- }
- .item {
- padding: 30rpx 13rpx 40rpx;
- &+.item {
- border-top: 1px solid #ccc;
- }
- .row {
- display: flex;
- align-items: center;
- .left, .right {
- height: 44rpx;
- background-color: #F3F3F7;
- }
- .left {
- width: 44rpx;
- margin-right: 12rpx;
- }
- .right {
- width: 423rpx;
- }
- &+.row {
- margin-top: 20rpx;
- }
- }
- }
- }
- }
- .match_live_box {
- background-color: #fff;
- border-top-left-radius: 20rpx;
- border-top-right-radius: 20rpx;
- padding-top: 43rpx;
- padding-bottom: 34rpx;
- .item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- line-height: 40rpx;
- font-size: 28rpx;
- font-weight: bold;
- color: #333333;
- padding: 19rpx 42rpx 19rpx 24rpx;
- }
- .radius {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 32rpx;
- height: 32rpx;
- border-radius: 50%;
- border: 3rpx solid #DC3C23;
- }
- .radius-active {
- width: 16rpx;
- height: 16rpx;
- border-radius: 50%;
- background-color: #DC3C23;
- }
- }
- .tag_popup_box {
- background-color: #fff;
- border-top-left-radius: 20rpx;
- border-top-right-radius: 20rpx;
- position: relative;
- padding-bottom: 130rpx;
- .top {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 26rpx 39rpx 40rpx 36rpx;
- .u-input {
- flex: 1;
- border: none;
- height: 58rpx;
- border-radius: 44rpx;
- background-color: #F5F5F5;
- box-sizing: border-box;
- }
- .left_img {
- min-width: 19rpx;
- max-width: 19rpx;
- margin-right: 31rpx;
- }
- .close {
- min-width: 28rpx;
- max-width: 28rpx;
- margin-left: 24rpx;
- }
- }
- .list {
- max-height: 50vh;
- overflow-y: auto;
- padding-left: 24rpx;
- padding-right: 41rpx;
- .li {
- height: 75rpx;
- display: flex;
- align-items: center;
- font-size: 24rpx;
- color: #333;
- font-weight: bold;
- .img {
- width: 34rpx;
- height: 34rpx;
- }
- }
- }
- .no-tag-box {
- padding-top: 170rpx;
- padding-bottom: 300rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- .no {
- display: block;
- width: 164rpx;
- margin-bottom: 37rpx;
- }
- .found {
- line-height: 45rpx;
- font-size: 32rpx;
- font-weight: bold;
- color: #333333;
- margin-bottom: 12rpx;
- }
- .text {
- height: 33rpx;
- font-size: 24rpx;
- font-weight: 400;
- color: #999999;
- }
- }
- .foot {
- padding-top: 26rpx;
- padding-bottom: 22rpx;
- box-shadow: 0px -3px 8px 1px rgba(0,0,0,0.1);
- line-height: 1;
- box-sizing: border-box;
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: #ffff;
- z-index: 2;
- }
- .btn {
- width: 232rpx;
- height: 62rpx;
- border-radius: 10rpx;
- border: 1px solid #707070;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28rpx;
- font-weight: 400;
- color: #333333;
- }
- .btn1 {
- width: 232rpx;
- height: 62rpx;
- border-radius: 10rpx;
- border: 1px solid #DC3C23;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28rpx;
- font-weight: 400;
- color: #fff;
- background-color: #DC3C23;
- }
- }
- .no-data {
- padding-top: 20vh;
- .e_img {
- display: block;
- width: 160rpx;
- margin: 0 auto;
- }
- .text {
- color: #999;
- font-size: 32rpx;
- margin-top: 32rpx;
- margin-bottom: 60rpx;
- text-align: center;
- }
- .reset-box {
- display: flex;
- justify-content: center;
- .btn {
- border: 1px solid #DC3C23;
- color: #DC3C23;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0 30rpx;
- height: 84rpx;
- border-radius: 16rpx;
- }
- }
- }
- .scroll {
- height: calc(100vh - 290rpx - var(--window-bottom));
- }
- .to-top {
- position: fixed;
- right: 24px;
- bottom: 248rpx;
- z-index: 5;
- height: 40px;
- width: 40px;
- border-radius: 50%;
- background-color: #1D2550;
- color: #fff;
- display: flex;
- align-items: center;
- justify-content: center;
- &.up {
- .u-icon {
- transform: rotate(90deg);
- }
- }
- &.down {
- .u-icon {
- transform: rotate(-90deg);
- }
- }
- }
- .news-install {
- position: sticky;
- bottom: var(--window-bottom);
- z-index: 200;
- }
- </style>
|