| | |
| | | <span>{{item.userName}}</span> |
| | | </div> |
| | | <div class="content_left_item1_content_row_line"> |
| | | <el-progress |
| | | :show-text="false" |
| | | :percentage="item.doneNum / baseNum"> |
| | | <el-progress :show-text="false" :percentage="item.doneNum / baseNum * 100"> |
| | | </el-progress> |
| | | </div> |
| | | <div class="content_left_item1_content_row_num">{{ item.doneNum }}</div> |
| | |
| | | </div> |
| | | <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="main_container"> |
| | | <div ref="scrollContainer" class="scroll_container"> |
| | | <div v-for="(item, index) in data.marginStatistics" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div v-for="(item, index) in data.marginStatistics" :key="index" |
| | | :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div class="scroll_item_row">{{ item.materialName }} / {{ item.procedureName }}</div> |
| | | <div class="scroll_item_row">{{ item.warehouseName }}</div> |
| | | <div class="scroll_item_row">{{ item.location }}</div> |
| | |
| | | <!-- æå计åè¿åº¦/å·¥åºè¿åº¦ --> |
| | | <div class="content_center_top"> |
| | | <div class="content_center_top_list"> |
| | | <div @click="clickCate(index)" :class="item.active ? 'content_center_top_list_item bg4' : 'content_center_top_list_item bg3'" v-for="(item, index) in cate" :key="index"> |
| | | <div @click="clickCate(index)" |
| | | :class="item.active ? 'content_center_top_list_item bg4' : 'content_center_top_list_item bg3'" |
| | | v-for="(item, index) in cate" :key="index"> |
| | | {{ item.name }} |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <div @mouseenter="handleMouseEnter1" @mouseleave="handleMouseLeave1" class="main_container"> |
| | | <div ref="scrollContainer1" class="scroll_container"> |
| | | <div v-for="(item, index) in data.plannedProgress" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div v-for="(item, index) in data.plannedProgress" :key="index" |
| | | :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div class="scroll_item_row">{{ item.code }}</div> |
| | | <div class="scroll_item_row">{{ item.materialName }}</div> |
| | | <div class="scroll_item_row">{{ item.materialCode }}</div> |
| | | <div class="scroll_item_row">{{ item.num }}</div> |
| | | <div class="scroll_item_row"> |
| | | <el-tooltip |
| | | v-for="(child, i) in item.procedureList" :key="i" |
| | | effect="dark" |
| | | :content="'å·²æ¥å·¥è¯åæ°' + child.doneNum + 'ï¼å·¥åºè®¡åæ°' + child.planNum" |
| | | placement="top"> |
| | | <el-tooltip v-for="(child, i) in item.procedureList" :key="i" effect="dark" |
| | | :content="'å·²æ¥å·¥è¯åæ°' + child.doneNum + 'ï¼å·¥åºè®¡åæ°' + child.planNum" placement="top"> |
| | | <div class="scroll_item_row_item" @click="jump(child.procedureId, child.procedureName)"> |
| | | <div class="scroll_item_row_item_x"></div> |
| | | <!-- <img v-if="i == 0 || i == 1" src="@/assets/img/ic_complete@2x.png" alt="" /> --> |
| | |
| | | </div> |
| | | <div @mouseenter="handleMouseEnter2" @mouseleave="handleMouseLeave2" class="main_container"> |
| | | <div ref="scrollContainer2" class="scroll_container"> |
| | | <div v-for="(item, index) in data.processProgress" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div v-for="(item, index) in data.processProgress" :key="index" |
| | | :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div class="scroll_item_row">{{ item.procedureName }}</div> |
| | | <div class="scroll_item_row">{{ item.planCount }}</div> |
| | | <div class="scroll_item_row">{{ item.num }}</div> |
| | |
| | | </div> |
| | | <div @mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3" class="main_container"> |
| | | <div ref="scrollContainer3" class="scroll_container"> |
| | | <div v-for="(item, index) in data.log" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div v-for="(item, index) in data.log" :key="index" |
| | | :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div class="scroll_item_row">{{ item.userName }}</div> |
| | | <div class="scroll_item_row">{{ item.materialName }}</div> |
| | | <div class="scroll_item_row">{{ item.materialCode }}</div> |
| | |
| | | </div> |
| | | <div @mouseenter="handleMouseEnter4" @mouseleave="handleMouseLeave4" class="main_container"> |
| | | <div ref="scrollContainer4" class="scroll_container"> |
| | | <div v-for="(item, index) in data.patrolInspection" :key="index" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div v-for="(item, index) in data.patrolInspection" :key="index" |
| | | :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
| | | <div class="scroll_item_row">{{ item.checkdate }}</div> |
| | | <div class="scroll_item_row">{{ item.deviceName }}</div> |
| | | <div class="scroll_item_row">{{ item.status == 0 ? 'åæ ¼' : 'ä¸åæ ¼' }}</div> |
| | |
| | | // æå计åè¿åº¦ |
| | | getWorkPlansList(companyId.value, departId.value) |
| | | .then(res => { |
| | | res.forEach(item => { |
| | | item.rate = Math.trunc(item.rate) |
| | | }) |
| | | data.plannedProgress = res |
| | | nextTick(() => { |
| | | start1() |
| | |
| | | seriesData.push({name:item.name, value:item.num}) |
| | | }) |
| | | let option = { |
| | | // title: { |
| | | // text: 'ååæ°éç»è®¡', |
| | | // subtext: '纯å±èæ', |
| | | // left: 'center' |
| | | // }, |
| | | // tooltip: { |
| | | // trigger: 'item', |
| | | // formatter: '{a} <br/>{b} : {c} ({d}%)' |
| | | // }, |
| | | legend: { |
| | | show: false, |
| | | type: 'scroll', |
| | |
| | | { |
| | | // name: 'å§å', |
| | | type: 'pie', |
| | | |
| | | radius: ['60%', '70%'], |
| | | // avoidLabelOverlap: false, |
| | | itemStyle: { |
| | |
| | | } |
| | | option && myChart.setOption(option); |
| | | } |
| | | |
| | | // onBeforeUnmount(()=>{ |
| | | // clearTimeout(timer.value) |
| | | // clearTimeout(timer1.value) |
| | | // clearTimeout(timer2.value) |
| | | // clearTimeout(timer3.value) |
| | | // clearTimeout(timer4.value) |
| | | // }) |
| | | onUnmounted(()=>{ |
| | | clearTimeout(timer.value) |
| | | clearTimeout(timer1.value) |
| | |
| | | display: flex; |
| | | align-items: start; |
| | | justify-content: space-between; |
| | | |
| | | .content_left { |
| | | flex: 1; |
| | | .content_left_item1 { |
| | | width: 100%; |
| | | height: 398px; |
| | | margin-bottom: 20px; |
| | | .content_left_item1_head { |
| | | background: url('@/assets/img/home_title_short@2x.png'); |
| | |
| | | line-height: 38px; |
| | | padding-left: 34px; |
| | | box-sizing: border-box; |
| | | |
| | | span { |
| | | font-size: 16px; |
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
| | |
| | | text-shadow: 0px 0px 10px rgba(0,24,72,0.75); |
| | | } |
| | | } |
| | | |
| | | .content_left_item1_content { |
| | | width: 100%; |
| | | height: 360px; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%); |
| | | |
| | | .content_left_item1_content_row { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 13px; |
| | | |
| | | &:last-child { |
| | | margin: 0; |
| | | } |
| | | |
| | | .content_left_item1_content_row_name { |
| | | flex-shrink: 0; |
| | | width: 100px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | span { |
| | | font-size: 13px; |
| | | font-family: SourceHanSansSC-Regular, SourceHanSansSC; |
| | |
| | | color: #D2E0FF; |
| | | margin-left: 9px; |
| | | } |
| | | |
| | | .num { |
| | | width: 20px; |
| | | height: 20px; |
| | |
| | | font-weight: 500; |
| | | color: #FFFFFF; |
| | | } |
| | | |
| | | .bg1 { |
| | | background: url('@/assets/img/rank_blue@2x.png'); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | |
| | | .bg2 { |
| | | background: url('@/assets/img/rank_yellow@2x.png'); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | } |
| | | |
| | | .content_left_item1_content_row_line { |
| | | flex: 1; |
| | | margin: 0 15px; |
| | | |
| | | &::v-deep(.el-progress-bar__outer) { |
| | | border-radius: 0%; |
| | | background: rgba(255,255,255,0.13); |
| | | } |
| | | |
| | | &::v-deep(.el-progress-bar__inner) { |
| | | border-radius: 0%; |
| | | background: linear-gradient(270deg, #00B0FF 0%, #345BA3 100%); |
| | | } |
| | | } |
| | | |
| | | .content_left_item1_content_row_num { |
| | | font-size: 13px; |
| | | width: 60px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_left_item2 { |
| | | width: 100%; |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .content_left_item2_head { |
| | | background: url('@/assets/img/home_title_short@2x.png'); |
| | | background-repeat: no-repeat; |
| | |
| | | line-height: 38px; |
| | | padding-left: 34px; |
| | | box-sizing: border-box; |
| | | |
| | | span { |
| | | font-size: 16px; |
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
| | |
| | | text-shadow: 0px 0px 10px rgba(0,24,72,0.75); |
| | | } |
| | | } |
| | | |
| | | .content_left_item2_content { |
| | | width: 100%; |
| | | height: 361px; |
| | | height: 100%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%); |
| | | |
| | | .item2_content_head { |
| | | width: 100%; |
| | | height: 36px; |
| | | display: flex; |
| | | align-items: center; |
| | | background: rgba(52,88,159,0.5); |
| | | |
| | | .item2_content_head_item { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | font-family: PingFangSC-Medium, PingFang SC; |
| | | font-weight: 500; |
| | | color: #01D9FE; |
| | | |
| | | &:first-child { |
| | | flex: 1.5; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main_container { |
| | | width: 100%; |
| | | height: calc(100% - 36px); |
| | | |
| | | .scroll_container { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | |
| | | .scroll_item_bg1 { |
| | | background: rgba(52,88,159,0.2); |
| | | } |
| | | |
| | | .scroll_item_bg2 { |
| | | background: rgba(52,88,159,0.5); |
| | | } |
| | | |
| | | .scroll_item { |
| | | width: 100%; |
| | | height: 36px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .scroll_item_row { |
| | | flex: 1; |
| | | width: 0; |
| | |
| | | justify-content: center; |
| | | color: #FFFFFF; |
| | | font-size: 13px; |
| | | |
| | | &:first-child { |
| | | flex: 1.5; |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_center { |
| | | flex: 2; |
| | | margin: 0 20px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .content_center_top { |
| | | width: 100%; |
| | | height: 509px; |
| | | margin-bottom: 20px; |
| | | background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%); |
| | | |
| | | .content_center_top_list { |
| | | width: 100%; |
| | | height: 38px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .bg3 { |
| | | background: url('@/assets/img/tab_select_grey@2x.png'); |
| | | background-size: 100% 100%; |
| | | } |
| | | |
| | | .bg4 { |
| | | background: url('@/assets/img/tab_select@2x.png'); |
| | | background-size: 100% 100%; |
| | |
| | | color: #FFFFFF; |
| | | margin-right: 20px; |
| | | text-shadow: 0px 0px 10px rgba(0,24,72,0.75); |
| | | |
| | | &:last-child { |
| | | margin-right: 0; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_center_top_form { |
| | | width: 100%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | height: calc(100% - 38px); |
| | | |
| | | .content_center_top_form_head { |
| | | width: 100%; |
| | | height: 34px; |
| | | background: rgba(52,88,159,0.5); |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .content_center_top_form_head_item { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | font-family: PingFangSC-Medium, PingFang SC; |
| | | font-weight: 500; |
| | | color: #01D9FE; |
| | | |
| | | &:nth-child(5) { |
| | | flex: 2.7; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main_container { |
| | | width: 100%; |
| | | height: calc(100% - 34px); |
| | | |
| | | .scroll_container { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | |
| | | .scroll_item_bg1 { |
| | | background: rgba(52,88,159,0.2); |
| | | } |
| | | |
| | | .scroll_item_bg2 { |
| | | background: rgba(52,88,159,0.5); |
| | | } |
| | | |
| | | .scroll_item { |
| | | width: 100%; |
| | | height: 58px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .scroll_item_row { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | justify-content: center; |
| | | color: #FFFFFF; |
| | | font-size: 13px; |
| | | |
| | | &:nth-child(5) { |
| | | flex: 3; |
| | | } |
| | | |
| | | .scroll_item_row_item { |
| | | width: 29px; |
| | | height: 29px; |
| | |
| | | border: 2px solid #01D9FE; |
| | | cursor: pointer; |
| | | position: relative; |
| | | |
| | | &:last-child { |
| | | margin-right: 0; |
| | | |
| | | .scroll_item_row_item_x { |
| | | display: none; |
| | | } |
| | | } |
| | | |
| | | &:nth-child(1) { |
| | | border: 2px solid #03D2B5; |
| | | |
| | | .scroll_item_row_item_x { |
| | | background-color: #03D2B5; |
| | | } |
| | | } |
| | | |
| | | &:nth-child(2) { |
| | | border: 2px solid #03D2B5; |
| | | } |
| | | |
| | | img { |
| | | width: 17px; |
| | | height: 13px; |
| | | } |
| | | |
| | | span { |
| | | font-size: 12px; |
| | | font-family: PingFangSC-Regular, PingFang SC; |
| | | font-weight: 400; |
| | | color: #01D9FE; |
| | | } |
| | | |
| | | .scroll_item_row_item_wz { |
| | | white-space: nowrap; |
| | | position: absolute; |
| | |
| | | font-weight: 400; |
| | | color: #FFFFFF; |
| | | } |
| | | |
| | | .scroll_item_row_item_x { |
| | | position: absolute; |
| | | right: -85%; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_center_top_form1 { |
| | | width: 100%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | height: calc(100% - 38px); |
| | | |
| | | .content_center_top_form_head { |
| | | width: 100%; |
| | | height: 34px; |
| | | background: rgba(52,88,159,0.5); |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .content_center_top_form_head_item { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | color: #01D9FE; |
| | | } |
| | | } |
| | | |
| | | .main_container { |
| | | width: 100%; |
| | | height: calc(100% - 34px); |
| | | |
| | | .scroll_container { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | |
| | | .scroll_item_bg1 { |
| | | background: rgba(52,88,159,0.2); |
| | | } |
| | | |
| | | .scroll_item_bg2 { |
| | | background: rgba(52,88,159,0.5); |
| | | } |
| | | |
| | | .scroll_item { |
| | | width: 100%; |
| | | height: 36px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .scroll_item_row { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | font-size: 13px; |
| | | justify-content: center; |
| | | color: #FFFFFF; |
| | | |
| | | .scroll_item_row_item { |
| | | width: 29px; |
| | | height: 29px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_center_bottom { |
| | | width: 100%; |
| | | height: 286px; |
| | | |
| | | .content_center_bottom_head { |
| | | width: 100%; |
| | | height: 38px; |
| | |
| | | background: url('@/assets/img/gongxu_title@2x.png'); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | |
| | | span { |
| | | font-size: 16px; |
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
| | |
| | | text-shadow: 0px 0px 10px rgba(0,24,72,0.75); |
| | | } |
| | | } |
| | | |
| | | .content_center_bottom_b { |
| | | width: 100%; |
| | | height: calc(100% - 38px); |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%); |
| | | |
| | | .content_center_top_form_head { |
| | | width: 100%; |
| | | height: 34px; |
| | | background: rgba(52,88,159,0.5); |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .content_center_top_form_head_item { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | font-family: PingFangSC-Medium, PingFang SC; |
| | | font-weight: 500; |
| | | color: #01D9FE; |
| | | |
| | | &:nth-child(4) { |
| | | flex: 2; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main_container { |
| | | width: 100%; |
| | | height: calc(100% - 33px); |
| | | |
| | | .scroll_container { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | |
| | | .scroll_item_bg1 { |
| | | background: rgba(52,88,159,0.2); |
| | | } |
| | | |
| | | .scroll_item_bg2 { |
| | | background: rgba(52,88,159,0.5); |
| | | } |
| | | |
| | | .scroll_item { |
| | | width: 100%; |
| | | height: 37px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .scroll_item_row { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: #FFFFFF; |
| | | |
| | | &:nth-child(4) { |
| | | flex: 2; |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_right { |
| | | flex: 1; |
| | | |
| | | .content_right_top { |
| | | width: 100%; |
| | | height: 511px; |
| | | margin-bottom: 20px; |
| | | |
| | | .content_right_top_head { |
| | | width: 100%; |
| | | height: 38px; |
| | |
| | | background: url('@/assets/img/home_title_short@2x.png'); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | |
| | | span { |
| | | font-size: 16px; |
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
| | |
| | | text-shadow: 0px 0px 10px rgba(0,24,72,0.75); |
| | | } |
| | | } |
| | | |
| | | .content_right_top_nr { |
| | | width: 100%; |
| | | height: calc(100% - 38px); |
| | | background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%); |
| | | position: relative; |
| | | |
| | | .content_right_top_nr_bottom_yuan { |
| | | position: absolute; |
| | | top: 50%; |
| | |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | span { |
| | | &:first-child { |
| | | font-size: 26px; |
| | |
| | | font-weight: 500; |
| | | color: #FFFFFF; |
| | | } |
| | | |
| | | &:last-child { |
| | | font-size: 13px; |
| | | font-family: SourceHanSansSC-Regular, SourceHanSansSC; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_right_top_nr_top { |
| | | width: 100%; |
| | | height: 50%; |
| | | padding: 10px 0 0 10px; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .content_right_top_nr_bottom { |
| | | width: 100%; |
| | | height: 50%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_right_bottom { |
| | | width: 100%; |
| | | height: 284px; |
| | | |
| | | .content_right_bottom_head { |
| | | width: 100%; |
| | | height: 38px; |
| | |
| | | background: url('@/assets/img/home_title_short@2x.png'); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | |
| | | span { |
| | | font-size: 16px; |
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
| | |
| | | text-shadow: 0px 0px 10px rgba(0,24,72,0.75); |
| | | } |
| | | } |
| | | |
| | | .content_right_bottom_nr { |
| | | width: 100%; |
| | | height: calc(100% - 38px); |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%); |
| | | |
| | | .item2_content_head { |
| | | width: 100%; |
| | | height: 36px; |
| | | display: flex; |
| | | align-items: center; |
| | | background: rgba(52,88,159,0.5); |
| | | |
| | | .item2_content_head_item { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | font-family: PingFangSC-Medium, PingFang SC; |
| | | font-weight: 500; |
| | | color: #01D9FE; |
| | | |
| | | &:first-child { |
| | | flex: 2; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main_container { |
| | | width: 100%; |
| | | height: calc(100% - 36px); |
| | | |
| | | .scroll_container { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | |
| | | .scroll_item_bg1 { |
| | | background: rgba(52,88,159,0.2); |
| | | } |
| | | |
| | | .scroll_item_bg2 { |
| | | background: rgba(52,88,159,0.5); |
| | | } |
| | | |
| | | .scroll_item { |
| | | width: 100%; |
| | | height: 36px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .scroll_item_row { |
| | | flex: 1; |
| | | height: 100%; |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: #FFFFFF; |
| | | |
| | | &:first-child { |
| | | flex: 2; |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | }</style> |
| | | |