From bb2b0836b12254eee6bad1886f3d5606ab58aa6b Mon Sep 17 00:00:00 2001
From: jazz <jazzxhunter@163.com>
Date: 星期一, 04 十二月 2023 19:44:20 +0800
Subject: [PATCH] update_2023120041944_项目-治疗室屏幕web-切图
---
src/pages/room/detail.vue | 444 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 435 insertions(+), 9 deletions(-)
diff --git a/src/pages/room/detail.vue b/src/pages/room/detail.vue
index 03022fe..9490937 100644
--- a/src/pages/room/detail.vue
+++ b/src/pages/room/detail.vue
@@ -7,27 +7,177 @@
<img class="page_logo_2" src="../../assets/img/logo_2.png">
</div>
<div class="right flex-1 flex flex-jcfe flex-ver">
+ <div class="reset_btn flex flex-center">閲嶇疆鎴块棿鐘舵��</div>
<div class="page_date">
- <div class="page_week">{{timeObj.week}}</div>
- <div class="page_day">{{timeObj.date}}</div>
+ <div class="page_week">{{ timeObj.week }}</div>
+ <div class="page_day">{{ timeObj.date }}</div>
</div>
- <div class="page_time">{{timeObj.timeMin}}</div>
- <!-- <div class="page_time">{{timeObj.time}}</div> -->
+ <div class="page_time">{{ timeObj.timeMin }}</div>
+ <!-- <div class="page_time">{{ timeObj.time }}</div> -->
</div>
</div>
- <div>123</div>
+ <!-- 鏈湁瀹夋帓 -->
+ <div class="page_container flex flex-ver hide">
+ <div class="main flex-1">
+ <div class="room_title">VIP-璇婄枟瀹�-1</div>
+ <div class="room_main_tip" style="margin-top: 93px;line-height: 186px;font-size: 140px;">-浣跨敤涓�-</div>
+ <div class="btn_box flex flex-center">
+ <div class="flex flex-ver">
+ <div class="btn_box__item flex flex-center white" data-tx="绌洪棽">
+ <div class="flex flex-ver">
+ <img class="icon" src="../../assets/img/free.png">
+ <div class="tx">绌洪棽</div>
+ </div>
+ </div>
+ <div class="btn_box__item flex flex-center blue" data-tx="浣跨敤涓�">
+ <div class="flex flex-ver">
+ <img class="icon" src="../../assets/img/using.png">
+ <div class="tx white">浣跨敤涓�</div>
+ </div>
+ </div>
+ <div class="btn_box__item flex flex-center yellow" data-tx="瀹汉浼戞伅">
+ <div class="flex flex-ver">
+ <img class="icon" src="../../assets/img/rest.png">
+ <div class="tx">瀹汉浼戞伅</div>
+ </div>
+ </div>
+ <div class="btn_box__item flex flex-center gray" data-tx="閫氱煡鎵撴壂">
+ <div class="flex flex-ver">
+ <img class="icon" src="../../assets/img/clear.png">
+ <div class="tx">閫氱煡鎵撴壂</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 娌℃湁榛樿瀹汉鍜屾湁瀹夋帓 -->
+ <div class="page_container flex flex-ver hide">
+ <div class="main flex-1">
+ <div class="room_title">VIP-璇婄枟瀹�-1</div>
+ <div class="room_main_tip">-浣跨敤涓�-</div>
+ <div class="room_left_btn_box flex flex-ver">
+ <div class="room_left_btn_box__item flex-1 flex flex-center yellow">瀹汉浼戞伅</div>
+ <div class="room_left_btn_box__item flex-1 flex flex-center gray">閫氱煡鎵撴壂</div>
+ <!-- <div class="room_left_btn_box__item flex flex-center green">閫氱煡鎵撴壂</div> -->
+ <!-- <div class="room_left_btn_box__item flex flex-center green">缁撴潫鎵撴壂</div> -->
+ </div>
+ </div>
+ <div class="right">
+ <div class="right_block flex flex-col">
+ <div class="guest_title flex flex-center">绛夊緟璇婄枟</div>
+ <div class="guest_block flex-1">
+ <div class="guest_list">
+ <div v-for="(item, index) in list" :key="index" class="guest_list__row flex flex-ver">
+ <div class="guest_list__td flex flex-center">
+ <div>
+ <div class="tx">寮�*姘�</div>
+ <div class="tx" style="font-size: 14px;line-height: 20px;">2300000000</div>
+ </div>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <span class="tx">15:00寮�濮�</span>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <span class="tx">寮犳��姘�(鍖荤敓)銆佸紶鎬�姘�(鎶ゅ＋)</span>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <img class="icon" src="../../assets/img/choose.png">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 榛樿瀹汉鍜屾湁瀹夋帓 -->
+ <div class="page_container flex flex-ver">
+ <div class="main flex-1">
+ <div class="room_title">VIP-璇婄枟瀹�-1</div>
+ <div class="room_content">
+ <div class="tip">璇婄枟瀹夋帓</div>
+ <div class="name">寮犳��姘�</div>
+ <div class="ciq">(2300000000)</div>
+ <div class="time">瀹夋帓娌荤枟鏃堕棿锛�13:30 寮�濮�</div>
+ </div>
+ <div class="room_left_btn_box flex flex-ver" style="margin-top: 105px;">
+ <div class="room_left_btn_box__item flex flex-center green btn_ani">寮�濮嬫不鐤�</div>
+ <!-- <div class="room_left_btn_box__item flex-1 flex flex-center yellow">瀹汉浼戞伅</div>
+ <div class="room_left_btn_box__item flex-1 flex flex-center gray">閫氱煡鎵撴壂</div> -->
+ <!-- <div class="room_left_btn_box__item flex flex-center green">閫氱煡鎵撴壂</div> -->
+ <!-- <div class="room_left_btn_box__item flex flex-center green">缁撴潫鎵撴壂</div> -->
+ </div>
+ </div>
+ <div class="right flex flex-col">
+ <div class="room_info flex-1">
+ <div class="staff_box flex flex-ver flex-sb">
+ <div class="staff_box_item flex-1 flex flex-center">
+ <div>
+ <div class="staff_box_item__title">鍒嗚瘖椤鹃棶</div>
+ <div class="staff_box_item__name">寮犳��姘�</div>
+ </div>
+ </div>
+ <div class="staff_box_item flex-1 flex flex-center">
+ <div>
+ <div class="staff_box_item__title">鎵ц鍖荤敓</div>
+ <div class="staff_box_item__name">寮犲尰鐢�</div>
+ </div>
+ </div>
+ <div class="staff_box_item flex-1 flex flex-center">
+ <div>
+ <div class="staff_box_item__title">鎵ц鎶ゅ＋</div>
+ <div class="staff_box_item__name">寮犳姢澹�</div>
+ </div>
+ </div>
+ </div>
+ <div class="room_info_project">
+ <div class="room_info_project_block">
+ <div class="tx">phis-Fotona 瓒匳鍏夈�乸his-琛ユ按瀚╄偆(F)娑傛姽</div>
+ </div>
+ </div>
+ </div>
+ <div class="guest_box flex flex-col">
+ <div class="guest_title flex flex-center">绛夊緟璇婄枟</div>
+ <div class="guest_block flex-1">
+ <div class="guest_list">
+ <div v-for="(item, index) in list" :key="index" class="guest_list__row flex flex-ver">
+ <div class="guest_list__td flex flex-center">
+ <div>
+ <div class="tx">寮�*姘�</div>
+ <div class="tx" style="font-size: 14px;line-height: 20px;">2300000000</div>
+ </div>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <span class="tx">15:00寮�濮�</span>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <span class="tx">寮犳��姘�(鍖荤敓)銆佸紶鎬�姘�(鎶ゅ＋)</span>
+ </div>
+ <div class="guest_list__td flex flex-center">
+ <img class="icon" src="../../assets/img/choose.png">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <XioCustomerSelect ref="XioCustomerSelect"></XioCustomerSelect>
</div>
</template>
<script>
// import Login from '../utils/jun_login.js'
-
+import XioCustomerSelect from '@/components/xio_customer_select'
export default {
name: 'RoomDetail',
- components: {},
+ components: {
+ XioCustomerSelect
+ },
inject: ['noop'],
data() {
return {
+ list: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
timeObj: {}// week锛氭槦鏈燂紝date锛氬勾鏈堟棩锛宼imeMin锛氭椂鍒嗭紝time锛氭椂鍒嗙锛宼imeStamp锛氭椂闂存埑
}
},
@@ -43,11 +193,287 @@
},
methods: {
init() {
- this.countGetTime(this, 'timeObj')
+ this.countGetTime(this, 'timeObj', 'detail')
}
}
}
</script>
<style scoped>
-</style>
\ No newline at end of file
+.page_header .reset_btn {
+ width: 200px;
+ height: 60px;
+ line-height: 35px;
+ border-radius: 5px;
+ background-color: rgba(47,174,206,1);
+ color: rgba(255,255,255,1);
+ font-size: 24px;
+ text-align: center;
+ font-family: Microsoft Yahei;
+}
+.page_container .main {
+ height: 100%;
+ border-radius: 10px;
+ background-color: rgba(255,255,255,1);
+ color: rgba(16,16,16,1);
+ font-size: 14px;
+ /* text-align: center; */
+ font-family: Roboto;
+}
+.page_container .main .room_title {
+ line-height: 50px;
+ color: rgba(255,255,255,1);
+ font-size: 36px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ padding: 10px 0;
+ background-color: rgba(34,123,235,1);
+ width: 400px;
+ margin: 39px auto 0 auto;
+}
+.page_container .main .room_main_tip {
+ line-height: 168px;
+ font-size: 120px;
+ color: rgba(46,77,124,1);
+ text-align: center;
+ font-family: PingFangSC-medium;
+ margin-top: 107px;
+ /* font-weight: bold; */
+}
+.page_container .main .room_main_tip.gray {
+ color: rgba(154,154,154,1);
+}
+.page_container .main .btn_box {
+ margin-top: 130px;
+}
+.page_container .main .btn_box__item {
+ width: 250px;
+ height: 120px;
+ border-radius: 10px;
+ box-shadow: 0px 2px 6px 0px rgba(206,206,206,1);
+ margin-right: 70px;
+}
+.page_container .main .btn_box__item:last-child {
+ margin-right: 0;
+}
+.page_container .main .btn_box__item.white {
+ background-color: rgba(255,255,255,1);
+}
+.page_container .main .btn_box__item.blue {
+ background-color: rgba(46,77,124,1);
+}
+.page_container .main .btn_box__item.yellow {
+ background-color: rgba(255,199,115,1);
+}
+.page_container .main .btn_box__item.gray {
+ background-color: rgba(206,206,206,1);
+}
+.page_container .main .btn_box__item .icon {
+ width: 60px;
+ height: 60px;
+ display: block;
+ margin-right: 17px;
+}
+.page_container .main .btn_box__item .tx {
+ line-height: 37px;
+ color: rgba(51,51,51,1);
+ font-size: 26px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+}
+.page_container .main .btn_box__item .tx.white {
+ color: rgba(255,255,255,1);
+}
+.page_container .main .room_left_btn_box {
+ padding: 0 23px;
+ margin-top: 163px;
+}
+.page_container .main .room_left_btn_box__item {
+ height: 150px;
+ line-height: 58px;
+ border-radius: 10px;
+ font-size: 40px;
+ text-align: center;
+ font-family: Microsoft Yahei;
+ margin-right: 20px;
+ font-weight: bold;
+}
+.page_container .main .room_left_btn_box__item:last-child {
+ margin-right: 0;
+}
+.page_container .main .room_left_btn_box__item.yellow {
+ color: rgba(255,255,255,1);
+ background-color: rgba(233,157,66,1);
+}
+.page_container .main .room_left_btn_box__item.gray {
+ background-color: rgba(206,206,206,1);
+ color: rgba(79,79,79,1);
+}
+.page_container .main .room_left_btn_box__item.green {
+ width: 500px;
+ height: 150px;
+ line-height: 73px;
+ border-radius: 10px;
+ background-color: rgba(47,174,206,1);
+ color: rgba(255,255,255,1);
+ font-size: 50px;
+ text-align: center;
+ margin: auto;
+}
+.page_container .main .room_content {
+ margin-top: 30px;
+}
+.page_container .main .room_content .tip {
+ line-height: 33px;
+ color: rgba(79,79,79,1);
+ font-size: 24px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+}
+.page_container .main .room_content .name {
+ line-height: 168px;
+ color: rgba(51,51,51,1);
+ font-size: 120px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ margin-top: 13px;
+}
+.page_container .main .room_content .ciq {
+ line-height: 42px;
+ color: rgba(51,51,51,1);
+ font-size: 30px;
+ text-align: center;
+ font-family: PingFangSC-regular;
+ margin-top: -5px;
+}
+.page_container .main .room_content .time {
+ line-height: 42px;
+ color: rgba(0,0,0,1);
+ font-size: 30px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ font-weight: bold;
+ margin-top: 21px;
+}
+.page_container .right {
+ width: 686px;
+ margin-left: 30px;
+ height: 100%;
+}
+.page_container .right_block {
+ width: 100%;
+ height: 100%;
+}
+.page_container .right .guest_title {
+ height: 60px;
+ line-height: 28px;
+ border-radius: 10px 10px 0px 0px;
+ background-color: rgba(255,255,255,1);
+ color: rgba(34,123,235,1);
+ font-size: 20px;
+ text-align: center;
+ font-family: Roboto;
+ font-weight: bold;
+}
+.page_container .right .guest_block {
+ overflow: auto;
+}
+.page_container .right .guest_list {
+ background-color: #fff;
+ padding-bottom: 23px;
+}
+.page_container .right .guest_list__row {
+ min-height: 75px;
+ background-color: rgba(34,123,235,0.1);
+}
+.page_container .right .guest_list__row:nth-child(2n) {
+ background-color: #fff;
+}
+.page_container .right .guest_list__td {}
+.page_container .right .guest_list__td .tx {
+ line-height: 30px;
+ color: rgba(16,16,16,1);
+ font-size: 22px;
+ text-align: center;
+ font-family: PingFangSC-regular;
+}
+.page_container .right .guest_list__td .icon {
+ width: 20px;
+ height: 20px;
+ display: block;
+}
+.page_container .right .guest_list__td:nth-child(1) {
+ width: 19.54%;
+}
+.page_container .right .guest_list__td:nth-child(2) {
+ width: 21.86%;
+}
+.page_container .right .guest_list__td:nth-child(3) {
+ width: 46.06%;
+}
+.page_container .right .guest_list__td:nth-child(4) {
+ width: 12.54%;
+}
+.page_container .right .room_info {
+ width: 100%;
+ border-radius: 10px;
+ background-color: rgba(255,255,255,0.3);
+}
+.page_container .right .room_info .staff_box {
+ margin-top: 30px;
+}
+.page_container .right .room_info .staff_box_item {
+ height: 180px;
+}
+.page_container .right .room_info .staff_box_item:nth-child(1) {
+ background-color: rgba(255,255,255,0.1);
+}
+.page_container .right .room_info .staff_box_item:nth-child(2) {
+ background-color: rgba(255,255,255,0.3);
+ margin: 0 10px;
+}
+.page_container .right .room_info .staff_box_item:nth-child(3) {
+ background-color: rgba(255,255,255,0.1);
+}
+.page_container .right .room_info .staff_box_item__title {
+ line-height: 28px;
+ color: rgba(255,255,255,1);
+ font-size: 20px;
+ text-align: center;
+ font-family: PingFangSC-regular;
+}
+.page_container .right .room_info .staff_box_item__name {
+ line-height: 56px;
+ color: rgba(255,255,255,1);
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ margin-top: 5px;
+}
+.page_container .right .room_info .room_info_project {
+ padding: 36px 20px 20px 20px;
+ height: 138px;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+.page_container .right .room_info .room_info_project_block {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+}
+.page_container .right .room_info .room_info_project .tx {
+ line-height: 39px;
+ color: rgba(255,255,255,1);
+ font-size: 28px;
+ text-align: center;
+ font-family: PingFangSC-regular;
+}
+.page_container .right .guest_box {
+ margin-top: 65px;
+ width: 100%;
+ height: 345px;
+ background-color: #fff;
+ overflow: hidden;
+}
+</style>
--
Gitblit v1.8.0