From 2cb2f782d29b546caecbabf16f605721e0ea4243 Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期四, 19 九月 2024 09:01:11 +0800 Subject: [PATCH] ‘’ --- h5_meeting/pages/index/index.vue | 433 ++++++++++++++++++++++++++++++----------------------- 1 files changed, 243 insertions(+), 190 deletions(-) diff --git a/h5_meeting/pages/index/index.vue b/h5_meeting/pages/index/index.vue index 4fb0f3a..a1878d3 100644 --- a/h5_meeting/pages/index/index.vue +++ b/h5_meeting/pages/index/index.vue @@ -1,211 +1,264 @@ <template> - <view class="main_app"> + <view class="main_app"> <image src="@/static/bg@2x.png" class="main_bg" mode=""></image> - <view class="header_wrap"> - <view class="title">浼氳瀹�</view> - <view class="time_wrap"> - <view class="time">{{time}}</view> - <view class="date">{{date}}</view> - </view> + <view class="header_wrap"> + <view class="title" @touchend="touchend">浼氳瀹�</view> + <view class="time_wrap"> + <view class="time">{{time}}</view> + <view class="date">{{date}}</view> + </view> </view> - <view class="home_status orange">浼氳涓�</view> - <view class="meeting_name">浼氳鍚嶇О</view> - <view class="meeting_con"> - <view class="content"> - <view class="line"> - <image src="@/static/ic_time@2x.png"></image> - <text>10~12</text> - </view> - <view class="line"> - <image src="@/static/ic_people@2x.png"></image> - <text>10~12</text> - </view> - </view> - <view class="qrcode"></view> - </view> - <view class="meeting_wrap"> - <view class="title">浠婃棩浼氳锛�6锛�</view> - <view class="list"> - <view class="item"> - <view class="name">寮�鍙戦儴浼氳</view> - <view class="line">棰勭害浜猴細鏉庢��鑻�</view> - <view class="line">13:30锝�15:00锛堝嵆灏嗗紑濮嬶級</view> - <image src="@/static/ic_meeting@2x.png" class="item_bg"></image> - </view> - <view class="item empty"> - <view class="name">鏆傛棤浼氳</view> - <view class="line">棰勭害浜猴細-</view> - <view class="line">-</view> - <image src="@/static/ic_meeting@2x.png" class="item_bg"></image> - </view> - </view> - </view> + <view class="home_status orange">浼氳涓�</view> + <view class="meeting_name">浼氳鍚嶇О</view> + <view class="meeting_con"> + <view class="content"> + <view class="line"> + <image src="@/static/ic_time@2x.png"></image> + <text>10~12</text> + </view> + <view class="line"> + <image src="@/static/ic_people@2x.png"></image> + <text>10~12</text> + </view> + </view> + <view class="qrcode"></view> + </view> + <view class="meeting_wrap"> + <view class="title">浠婃棩浼氳锛�6锛�</view> + <view class="list"> + <view class="item"> + <view class="name">寮�鍙戦儴浼氳</view> + <view class="line">棰勭害浜猴細鏉庢��鑻�</view> + <view class="line">13:30锝�15:00锛堝嵆灏嗗紑濮嬶級</view> + <image src="@/static/ic_meeting@2x.png" class="item_bg"></image> + </view> + <view class="item empty"> + <view class="name">鏆傛棤浼氳</view> + <view class="line">棰勭害浜猴細-</view> + <view class="line">-</view> + <image src="@/static/ic_meeting@2x.png" class="item_bg"></image> + </view> + </view> + </view> </view> </template> -<script> +<script> import dayjs from 'dayjs' + import { + meetScreenData + } from '@/api/index.js' export default { data() { return { - time: '', - date: '', - timer: null + time: '', + date: '', + timer: null, + touchNum: 0, + param: {} } }, - onLoad() { - this.initDatetime() + onLoad() { + this.initDatetime() + this.param = uni.getStorageSync('param') || {} + if(!this.param.code){ + return uni.navigateTo({ + url: '/pages/index/config' + }) + } + this.getData() }, methods: { - initDatetime() { - let weeks = ['鍛ㄦ棩','鍛ㄤ竴','鍛ㄤ簩','鍛ㄤ笁','鍛ㄥ洓','鍛ㄤ簲','鍛ㄥ叚'] - this.time = dayjs().format('HH:mm') - this.date = dayjs().format('YYYY-MM-DD')+ ' ' + weeks[new Date().getDay()] - this.timer = setInterval(() => { - this.time = dayjs().format('HH:mm') - this.date = dayjs().format('YYYY-MM-DD')+ ' ' + weeks[new Date().getDay()] - },1000) + getData() { + meetScreenData({ + roomId: this.param.code + }) + }, + touchend() { + this.touchNum++ + setTimeout(() => { + if (this.touchNum == 1) { + console.log('鍗曞嚮') + } + if (this.touchNum >= 2) { + uni.navigateTo({ + url: '/pages/index/config' + }) + } + this.touchNum = 0 + }, 250) + }, + initDatetime() { + let weeks = ['鍛ㄦ棩', '鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚'] + this.time = dayjs().format('HH:mm') + this.date = dayjs().format('YYYY-MM-DD') + ' ' + weeks[new Date().getDay()] + this.timer = setInterval(() => { + this.time = dayjs().format('HH:mm') + this.date = dayjs().format('YYYY-MM-DD') + ' ' + weeks[new Date().getDay()] + }, 1000) } } } </script> <style lang="scss" scoped> - .main_app{ - width: 100%; - min-height: 100vh; - position: relative; - font-size: 28rpx; - display: flex; - flex-direction: column; - justify-content: space-between; - padding-bottom: 35rpx; - color: #fff; - .meeting_wrap{ - margin-left: 42rpx; - margin-top: 85rpx; - .title{ - font-weight: 500; - font-size: 42rpx; - color: #FFFFFF; - line-height: 62rpx; - height: 62rpx; - margin-bottom: 32rpx; - } - .list{ - display: flex; - width: calc( 100vw - 42rpx ); - overflow-x: auto; - scrollbar-width: none; - &:-webkit-scrollbar { - display: none; /* Chrome Safari */ - } - .item{ - padding: 34rpx 28rpx; - display: flex; - flex-shrink: 0; - flex-direction: column; - width: 403rpx; - height: 315rpx; - background: linear-gradient( 90deg, #0095AC 0%, #00B5D1 100%); - border-radius: 7rpx; - margin-right: 28rpx; - position: relative; - .item_bg{ - position: absolute; - width: 178rpx; - height: 178rpx; - right: 0; - bottom: 0; - // z-index: -1; - } - .name{ - flex: 1; - font-weight: bold; - font-size: 39rpx; - } - .line{ - font-weight: 500; - margin-bottom: 7rpx; - } - } - .empty{ - background: rgba(255,255,255,0.11); - } - } - } - .meeting_con{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 42rpx; - .content{ - .line{ - display: flex; - align-items: center; - font-weight: 500; - font-size: 32rpx; - margin: 24rpx 0; - image{ - width: 30rpx; - height: 30rpx; - margin-right: 20rpx; - } - } - } - .qrcode{ - width: 166rpx; - height: 166rpx; - border: 1px solid red; - } - } - .meeting_name{ - margin-bottom: 12rpx; - font-weight: bold; - font-size: 49rpx; - padding-left: 42rpx; - } - .home_status{ - font-weight: bold; - font-size: 125rpx; - margin: 70rpx 42rpx; - line-height: 185rpx; - height: 185rpx; - } - .orange{ - color: #FFB100; - } - .header_wrap{ - padding: 34rpx 34rpx 0 0; - display: flex; - justify-content: space-between; - align-items: center; - .time_wrap{ - text-align: right; - .time{ - font-size: 56rpx; - margin-bottom: 4rpx; - } - } - .title{ - font-size: 56rpx; - font-weight: bold; - width: 430rpx; - height: 125rpx; - line-height: 125rpx; - text-align: center; - background: #00B5D1; - border-radius: 0rpx 7rpx 7rpx 0rpx; - } - } - .main_bg{ - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - object-fit: cover; - z-index: -1; - } + .main_app { + width: 100%; + min-height: 100vh; + position: relative; + font-size: 28rpx; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-bottom: 35rpx; + color: #fff; + + .meeting_wrap { + margin-left: 42rpx; + margin-top: 85rpx; + + .title { + font-weight: 500; + font-size: 42rpx; + color: #FFFFFF; + line-height: 62rpx; + height: 62rpx; + margin-bottom: 32rpx; + } + + .list { + display: flex; + width: calc(100vw - 42rpx); + overflow-x: auto; + scrollbar-width: none; + + &:-webkit-scrollbar { + display: none; + /* Chrome Safari */ + } + + .item { + padding: 34rpx 28rpx; + display: flex; + flex-shrink: 0; + flex-direction: column; + width: 403rpx; + height: 315rpx; + background: linear-gradient(90deg, #0095AC 0%, #00B5D1 100%); + border-radius: 7rpx; + margin-right: 28rpx; + position: relative; + + .item_bg { + position: absolute; + width: 178rpx; + height: 178rpx; + right: 0; + bottom: 0; + // z-index: -1; + } + + .name { + flex: 1; + font-weight: bold; + font-size: 39rpx; + } + + .line { + font-weight: 500; + margin-bottom: 7rpx; + } + } + + .empty { + background: rgba(255, 255, 255, 0.11); + } + } + } + + .meeting_con { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 42rpx; + + .content { + .line { + display: flex; + align-items: center; + font-weight: 500; + font-size: 32rpx; + margin: 24rpx 0; + + image { + width: 30rpx; + height: 30rpx; + margin-right: 20rpx; + } + } + } + + .qrcode { + width: 166rpx; + height: 166rpx; + border: 1px solid red; + } + } + + .meeting_name { + margin-bottom: 12rpx; + font-weight: bold; + font-size: 49rpx; + padding-left: 42rpx; + } + + .home_status { + font-weight: bold; + font-size: 125rpx; + margin: 70rpx 42rpx; + line-height: 185rpx; + height: 185rpx; + } + + .orange { + color: #FFB100; + } + + .header_wrap { + padding: 34rpx 34rpx 0 0; + display: flex; + justify-content: space-between; + align-items: center; + + .time_wrap { + text-align: right; + + .time { + font-size: 56rpx; + margin-bottom: 4rpx; + } + } + + .title { + font-size: 56rpx; + font-weight: bold; + width: 430rpx; + height: 125rpx; + line-height: 125rpx; + text-align: center; + background: #00B5D1; + border-radius: 0rpx 7rpx 7rpx 0rpx; + } + } + + .main_bg { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + object-fit: cover; + z-index: -1; + } } -</style> +</style> \ No newline at end of file -- Gitblit v1.9.3