| | |
|---|
| | | <template> |
|---|
| | | <div class="content1"> |
|---|
| | | <div class="content_left"> |
|---|
| | | <div class="content_left_item1"> |
|---|
| | | <div class="content_left_item1_head"> |
|---|
| | | <span>当日员工产量TOP10</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_left_item1_content"> |
|---|
| | | <div class="content_left_item1_content_row" v-for="(item, index) in 10" :key="index"> |
|---|
| | | <div class="content_left_item1_content_row_name"> |
|---|
| | | <div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div> |
|---|
| | | <span>赵立{{ index }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_left_item1_content_row_line"> |
|---|
| | | <el-progress |
|---|
| | | :show-text="false" |
|---|
| | | :percentage="50"> |
|---|
| | | </el-progress> |
|---|
| | | </div> |
|---|
| | | <div class="content_left_item1_content_row_num">342</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="content_left_item2"> |
|---|
| | | <div class="content_left_item2_head"> |
|---|
| | | <span>仓库实时余量统计</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_left_item2_content"> |
|---|
| | | <div class="item2_content_head"> |
|---|
| | | <div class="item2_content_head_item">物料名称 / 工序</div> |
|---|
| | | <div class="item2_content_head_item">仓库</div> |
|---|
| | | <div class="item2_content_head_item">货架</div> |
|---|
| | | <div class="item2_content_head_item">数量</div> |
|---|
| | | </div> |
|---|
| | | <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="main_container"> |
|---|
| | | <div ref="scrollContainer" class="scroll_container"> |
|---|
| | | <div v-for="(item, index) in listData" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'"> |
|---|
| | | <span>{{ item.name }}</span> |
|---|
| | | <div class="scroll_item_row"></div> |
|---|
| | | <div class="scroll_item_row"></div> |
|---|
| | | <div class="scroll_item_row"></div> |
|---|
| | | <div class="scroll_item_row"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="content1"> |
|---|
| | | <!-- <div class="content_left"> |
|---|
| | | |
|---|
| | | <div class="content_left_item2"> |
|---|
| | | <div class="content_left_item2_head"> |
|---|
| | | <span>仓库实时余量统计</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_center">2</div> |
|---|
| | | <div class="content_right">3</div> |
|---|
| | | <div class="content_left_item2_content"> |
|---|
| | | <div class="item2_content_head"> |
|---|
| | | <div class="item2_content_head_item">物料名称 / 工序</div> |
|---|
| | | <div class="item2_content_head_item">仓库</div> |
|---|
| | | <div class="item2_content_head_item">货架</div> |
|---|
| | | <div class="item2_content_head_item">数量</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 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="scroll_item_row">{{ item.num }}{{ item.unitName }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | <div class="content_center"> |
|---|
| | | <!-- 成品计划进度/工序进度 --> |
|---|
| | | <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"> |
|---|
| | | {{ item.name }} |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="content_center_top_form" v-if="cate[0].active"> |
|---|
| | | <div class="content_center_top_form_head"> |
|---|
| | | <div class="content_center_top_form_head_item">计划编码</div> |
|---|
| | | <div class="content_center_top_form_head_item">物料名称</div> |
|---|
| | | <div class="content_center_top_form_head_item">物料编码</div> |
|---|
| | | <div class="content_center_top_form_head_item">计划数量</div> |
|---|
| | | <div class="content_center_top_form_head_item">各工序完成情况</div> |
|---|
| | | <div class="content_center_top_form_head_item">良品数/完工数</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 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" style="text-align: left;"> |
|---|
| | | <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> |
|---|
| | | <span v-if="child.rate < 100">{{ child.rate.toFixed(0) }}%</span> |
|---|
| | | <img v-else src="@/assets/img/ic_complete@2x.png" alt="" /> |
|---|
| | | <span class="scroll_item_row_item_wz">{{ child.procedureName }}</span> |
|---|
| | | </div> |
|---|
| | | </el-tooltip> |
|---|
| | | </div> |
|---|
| | | <div class="scroll_item_row">{{ item.qualifiedNum }}/{{ item.doneNum }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="content_center_top_form1" v-if="cate[1].active"> |
|---|
| | | <div class="content_center_top_form_head"> |
|---|
| | | <div class="content_center_top_form_head_item">工序名称</div> |
|---|
| | | <div class="content_center_top_form_head_item">计划个数</div> |
|---|
| | | <div class="content_center_top_form_head_item">计划数量</div> |
|---|
| | | <div class="content_center_top_form_head_item">良品数</div> |
|---|
| | | <div class="content_center_top_form_head_item">不良品数</div> |
|---|
| | | <div class="content_center_top_form_head_item">未完工数量</div> |
|---|
| | | <div class="content_center_top_form_head_item">不良率</div> |
|---|
| | | </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 class="scroll_item_row">{{ item.procedureName }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.planCount }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.num }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.qualifiedNum }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.unqualifiedNum }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.undoneNum }}</div> |
|---|
| | | <div class="scroll_item_row">{{ (item.unqualifiedRate||0).toFixed(2) }}%</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 报工日志 --> |
|---|
| | | <div style="display: flex;"> |
|---|
| | | <div class="content_left" style="flex: 1;"> |
|---|
| | | <div class="content_left_item1"> |
|---|
| | | <div class="content_left_item1_head"> |
|---|
| | | <span>当日员工产量TOP10</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_left_item1_content" ref="scrollContainer"> |
|---|
| | | <div class="content_left_item1_content_row" v-for="(item, index) in data.production" :key="index"> |
|---|
| | | <div class="content_left_item1_content_row_name"> |
|---|
| | | <div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div> |
|---|
| | | <span>{{ item.userName }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_left_item1_content_row_line"> |
|---|
| | | <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> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="content_center_bottom"> |
|---|
| | | <div class="content_center_bottom_head"> |
|---|
| | | <span>报工日志</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_center_bottom_b"> |
|---|
| | | <div class="content_center_top_form_head"> |
|---|
| | | <div class="content_center_top_form_head_item">员工名称</div> |
|---|
| | | <div class="content_center_top_form_head_item">物料名称</div> |
|---|
| | | <div class="content_center_top_form_head_item">工序</div> |
|---|
| | | <div class="content_center_top_form_head_item">报工时间</div> |
|---|
| | | <div class="content_center_top_form_head_item">良品数</div> |
|---|
| | | <div class="content_center_top_form_head_item">不良品数</div> |
|---|
| | | <div class="content_center_top_form_head_item">不良率</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 class="scroll_item_row">{{ item.userName }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.materialName }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.procedureName }}</div> |
|---|
| | | <div class="scroll_item_row">{{ dateToSub(item.createTime) }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.qualifiedNum || 0 }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.unqualifiedNum || 0 }}</div> |
|---|
| | | <div class="scroll_item_row">{{ (item.unqualifiedRate || 0).toFixed(2) }}%</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="content_right"> |
|---|
| | | <!-- 近7天不良品分布 --> |
|---|
| | | <div class="content_right_top"> |
|---|
| | | <div class="content_right_top_head"> |
|---|
| | | <span>近7天不良品分布</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_right_top_nr"> |
|---|
| | | |
|---|
| | | <div class="content_right_top_nr_top" id="lineChrat"></div> |
|---|
| | | <div class="content_right_top_nr_bottom"> |
|---|
| | | <div class="content_right_top_nr_bottom_yuan" v-if="data.typeDistribution.length > 0"> |
|---|
| | | <span>{{ data.num }}</span> |
|---|
| | | <span>不良项分布</span> |
|---|
| | | </div> |
|---|
| | | <div id="pieChart"></div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 设备巡检记录 --> |
|---|
| | | <div class="content_right_bottom" ref="bottom1"> |
|---|
| | | <div class="content_right_bottom_head"> |
|---|
| | | <span>设备巡检记录</span> |
|---|
| | | </div> |
|---|
| | | <div class="content_right_bottom_nr"> |
|---|
| | | <div class="item2_content_head"> |
|---|
| | | <div class="item2_content_head_item">巡检时间</div> |
|---|
| | | <div class="item2_content_head_item">巡检设备</div> |
|---|
| | | <div class="item2_content_head_item">巡检结果</div> |
|---|
| | | <div class="item2_content_head_item">巡检人员</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 class="scroll_item_row">{{ dateToSub(item.checkdate) }}</div> |
|---|
| | | <div class="scroll_item_row">{{ item.deviceName }}</div> |
|---|
| | | <div class="scroll_item_row"> |
|---|
| | | <span v-if="item.status == 0">正常</span> |
|---|
| | | <span v-else style="color: #F84F26">异常</span> |
|---|
| | | </div> |
|---|
| | | <div class="scroll_item_row">{{ item.userName }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import {reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick} from 'vue' |
|---|
| | | import { dateToSub } from '@/utils' |
|---|
| | | import { reactive, ref, onMounted, nextTick, onUnmounted, computed, watch, toRefs } from 'vue' |
|---|
| | | import { getPlanData, getTop, getStockList, getWorkPlansList, getProcedureProcessList, getRecordLogPage, getDeviceCheckPage, getUnqualified7DayData, getUnqualifiedCateData } from '@/utils/api.js' |
|---|
| | | import { useCounterStore } from '@/stores/counter.js' |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | import { useRouter } from 'vue-router' |
|---|
| | | |
|---|
| | | let timer = ref(null) |
|---|
| | | let scrollContainer = ref(null) |
|---|
| | | let listData = reactive([ |
|---|
| | | {name: 'dom第一个'}, |
|---|
| | | {name: 'dom第二个'}, |
|---|
| | | {name: 'dom第三个'}, |
|---|
| | | {name: 'dom第四个'}, |
|---|
| | | {name: 'dom第五个'}, |
|---|
| | | {name: 'dom第六个'}, |
|---|
| | | {name: 'dom第七个'}, |
|---|
| | | {name: 'dom第八个'}, |
|---|
| | | {name: 'dom第九个'}, |
|---|
| | | {name: 'dom第十个'}, |
|---|
| | | ]) |
|---|
| | | start() |
|---|
| | | // 注：示例中的 listData 写的是静态数据，可以直接调用 start() |
|---|
| | | // 如果是接口获取 listData 列表时，需要在 nextTick 中调用 start() |
|---|
| | | // 否则，进入页面不会滚动。必须鼠标移入移出才会滚动 |
|---|
| | | // 用 nextTick 的原因是需要等 dom 元素加载完毕后再执行方法 |
|---|
| | | |
|---|
| | | // let chartData = reactive({ |
|---|
| | | // data: [] |
|---|
| | | // }) |
|---|
| | | // function getSensorData() { |
|---|
| | | // GetSensorData().then(res=> { |
|---|
| | | // chartData.data = res.data.data |
|---|
| | | // nextTick(()=>{ |
|---|
| | | // start() |
|---|
| | | // }) |
|---|
| | | // }) |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // onMounted(()=> { |
|---|
| | | // getSensorData() |
|---|
| | | // }) |
|---|
| | | const router = useRouter() |
|---|
| | | |
|---|
| | | onBeforeUnmount(()=>{ |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | let data = reactive({ |
|---|
| | | production: [], |
|---|
| | | marginStatistics: [], |
|---|
| | | plannedProgress: [], |
|---|
| | | processProgress: [], |
|---|
| | | log: [], |
|---|
| | | patrolInspection: [], |
|---|
| | | dayDistribution: [], |
|---|
| | | typeDistribution: [], |
|---|
| | | num: 0, |
|---|
| | | baseNum: 0, |
|---|
| | | bottomAuthHeight: 284 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let { baseNum, bottomAuthHeight } = toRefs(data) |
|---|
| | | |
|---|
| | | let timer = ref(null) |
|---|
| | | let timer1 = ref(null) |
|---|
| | | let timer2 = ref(null) |
|---|
| | | let timer3 = ref(null) |
|---|
| | | let timer4 = ref(null) |
|---|
| | | let timer5 = ref(null) |
|---|
| | | let scrollContainer = ref(null) |
|---|
| | | let scrollContainer1 = ref(null) |
|---|
| | | let scrollContainer2 = ref(null) |
|---|
| | | let scrollContainer3 = ref(null) |
|---|
| | | let scrollContainer4 = ref(null) |
|---|
| | | let bottom1 = ref(null) |
|---|
| | | let cate = ref([ |
|---|
| | | { |
|---|
| | | name: '成品计划进度', |
|---|
| | | id: 1, |
|---|
| | | active: true, |
|---|
| | | background: 'tab_select_grey@2x.png', |
|---|
| | | activeBackground: 'tab_select@2x.png' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '工序进度', |
|---|
| | | id: 2, |
|---|
| | | active: false, |
|---|
| | | background: 'tab_select_grey@2x.png', |
|---|
| | | activeBackground: 'tab_select@2x.png' |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | const enterprise = useCounterStore() |
|---|
| | | |
|---|
| | | const companyId = computed(() => { |
|---|
| | | return enterprise.companyId |
|---|
| | | }) |
|---|
| | | const departId = computed(() => { |
|---|
| | | return enterprise.departId |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const jump = (procedureId, procedureName) => { |
|---|
| | | enterprise.setProcedureName(procedureName) |
|---|
| | | router.push({ name: 'process', query: { procedureId } }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | watch(() => departId.value, (val) => { |
|---|
| | | if (val) { |
|---|
| | | init() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | start1() |
|---|
| | | |
|---|
| | | const init = () => { |
|---|
| | | setBottomHeight(); |
|---|
| | | // 当日员工产量TOP10 |
|---|
| | | getTop(companyId.value, departId.value) |
|---|
| | | .then(res => { |
|---|
| | | if (res.length > 0) { |
|---|
| | | data.baseNum = res[0].doneNum |
|---|
| | | } else { |
|---|
| | | data.baseNum = 0 |
|---|
| | | } |
|---|
| | | data.production = res |
|---|
| | | data.fifthScroll = true |
|---|
| | | }) |
|---|
| | | onUnmounted(()=>{ |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | }) |
|---|
| | | // 仓库实时余量统计 |
|---|
| | | // getStockList(companyId.value, departId.value) |
|---|
| | | // .then(res => { |
|---|
| | | // data.marginStatistics = res |
|---|
| | | // nextTick(() => { |
|---|
| | | // start() |
|---|
| | | // }) |
|---|
| | | // }) |
|---|
| | | cate.value.forEach((item, index) => { |
|---|
| | | if (item.active) { |
|---|
| | | if (index == 1) { |
|---|
| | | getProcedureProcessList(companyId.value, departId.value) |
|---|
| | | .then(res => { |
|---|
| | | data.processProgress = res |
|---|
| | | nextTick(() => { |
|---|
| | | start2() |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | // 成品计划进度 |
|---|
| | | getWorkPlansList(companyId.value, departId.value) |
|---|
| | | .then(res => { |
|---|
| | | data.plannedProgress = res |
|---|
| | | nextTick(() => { |
|---|
| | | start1() |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | function handleMouseEnter() { |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | } |
|---|
| | | function handleMouseLeave() { |
|---|
| | | start() |
|---|
| | | } |
|---|
| | | // 开启定时器 |
|---|
| | | function start() { |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | // 定时器触发周期 |
|---|
| | | let speed = ref(25) |
|---|
| | | timer.value = setInterval(ListScroll, speed.value) |
|---|
| | | } |
|---|
| | | function ListScroll() { |
|---|
| | | let scrollDom = scrollContainer.value |
|---|
| | | // 判读组件是否渲染完成 |
|---|
| | | if(scrollDom.offsetHeight == 0) { |
|---|
| | | scrollDom = scrollContainer.value |
|---|
| | | }else { |
|---|
| | | // 如果列表数量过少不进行滚动 |
|---|
| | | if(scrollDom.children.length < 4) { |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // 组件进行滚动 |
|---|
| | | scrollDom.scrollTop += 1 |
|---|
| | | // 判断是否滚动到底部 |
|---|
| | | if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
|---|
| | | // 获取组件第一个节点 |
|---|
| | | let first = scrollDom.children[0] |
|---|
| | | // 删除节点 |
|---|
| | | scrollDom.removeChild(first) |
|---|
| | | // 将该节点拼接到组件最后 |
|---|
| | | scrollDom.append(first) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 报工日志 |
|---|
| | | getRecordLogPage(companyId.value, departId.value, { |
|---|
| | | capacity: 20, |
|---|
| | | model: {}, |
|---|
| | | page: 1 |
|---|
| | | }).then(res => { |
|---|
| | | data.log = res.records |
|---|
| | | nextTick(() => { |
|---|
| | | start3() |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // 设备巡检记录 |
|---|
| | | getDeviceCheckPage(companyId.value, departId.value, { |
|---|
| | | capacity: 9999, |
|---|
| | | model: {}, |
|---|
| | | page: 1 |
|---|
| | | }).then(res => { |
|---|
| | | data.patrolInspection = res.records |
|---|
| | | nextTick(() => { |
|---|
| | | start4() |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // 近七天不良数 |
|---|
| | | getUnqualified7DayData(companyId.value, departId.value, '') |
|---|
| | | .then(res => { |
|---|
| | | if (res && res.length > 0) { |
|---|
| | | data.dayDistribution = res.map(item => { |
|---|
| | | return { |
|---|
| | | date: item.createTime, |
|---|
| | | num: item.unqualifiedNum |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | setDayChart() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | // 近七天不良项 |
|---|
| | | getUnqualifiedCateData(companyId.value, departId.value, '') |
|---|
| | | .then(res => { |
|---|
| | | if (res && res.length > 0) { |
|---|
| | | data.num = 0 |
|---|
| | | data.typeDistribution = res.map(item => { |
|---|
| | | data.num += item.unqualifiedNum |
|---|
| | | return { |
|---|
| | | name: item.categoryName, |
|---|
| | | num: item.unqualifiedNum |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | setTypeChart() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | // getPlanData |
|---|
| | | getPlanData(companyId.value, departId.value) |
|---|
| | | .then(res => { |
|---|
| | | enterprise.setNum(res) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | function setBottomHeight(){ |
|---|
| | | const pageHeight = window.innerHeight; |
|---|
| | | bottomAuthHeight = pageHeight - 700; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 七日折线图 |
|---|
| | | */ |
|---|
| | | function setDayChart() { |
|---|
| | | let dayChartDom = document.getElementById('lineChrat'); |
|---|
| | | let myChart = echarts.init(dayChartDom); |
|---|
| | | let dateList = [] |
|---|
| | | let numList = [] |
|---|
| | | let num = 0 |
|---|
| | | data.dayDistribution.forEach(item => { |
|---|
| | | dateList.push(item.date) |
|---|
| | | numList.push(item.num) |
|---|
| | | num += item.num |
|---|
| | | }) |
|---|
| | | let option; |
|---|
| | | option = { |
|---|
| | | title: { |
|---|
| | | text: `近七日不良品总数：${num}`, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | fontSize: 12 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: 40, |
|---|
| | | bottom: 30, |
|---|
| | | left: 60, |
|---|
| | | right: 10 |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | width: 0.5, |
|---|
| | | color: ['#fff'] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | onZero: true, |
|---|
| | | lineStyle: { |
|---|
| | | width: 0.5, |
|---|
| | | color: '#fff', |
|---|
| | | opacity: .5 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: dateList |
|---|
| | | }, |
|---|
| | | |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | width: 0.5, |
|---|
| | | color: ['#fff'] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | onZero: true, |
|---|
| | | lineStyle: { |
|---|
| | | width: 1, |
|---|
| | | color: '#fff', |
|---|
| | | opacity: .5 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: numList, |
|---|
| | | type: 'line', |
|---|
| | | lineStyle: { |
|---|
| | | color: '#03D2B5', |
|---|
| | | width: 1 |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(3, 210, 181, .9)', |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgba(3, 210, 181, 0)', |
|---|
| | | } |
|---|
| | | ]) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | name: '1adssad', |
|---|
| | | itemWidth: 10, |
|---|
| | | itemHeight: 10, |
|---|
| | | itemGap: 4, |
|---|
| | | textStyle: { |
|---|
| | | color: '#fff' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | option && myChart.setOption(option); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 不良类型分布 |
|---|
| | | */ |
|---|
| | | function setTypeChart() { |
|---|
| | | let dayChartDom = document.getElementById('pieChart'); |
|---|
| | | let myChart = echarts.init(dayChartDom); |
|---|
| | | let legendData = [] |
|---|
| | | let seriesData = [] |
|---|
| | | data.typeDistribution.forEach(item => { |
|---|
| | | legendData.push(item.name) |
|---|
| | | seriesData.push({ name: item.name, value: item.num }) |
|---|
| | | }) |
|---|
| | | let option = { |
|---|
| | | legend: { |
|---|
| | | show: false, |
|---|
| | | type: 'scroll', |
|---|
| | | orient: 'vertical', |
|---|
| | | right: 10, |
|---|
| | | top: 20, |
|---|
| | | bottom: 20, |
|---|
| | | data: legendData |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | // name: '姓名', |
|---|
| | | type: 'pie', |
|---|
| | | |
|---|
| | | radius: ['60%', '70%'], |
|---|
| | | // avoidLabelOverlap: false, |
|---|
| | | itemStyle: { |
|---|
| | | borderRadius: 4, |
|---|
| | | borderColor: 'rgba(52, 88, 159, 0.4)', |
|---|
| | | borderWidth: 4 |
|---|
| | | }, |
|---|
| | | center: ['50%', '50%'], |
|---|
| | | labelLine: { |
|---|
| | | show: false |
|---|
| | | }, |
|---|
| | | label: { |
|---|
| | | formatter: '{dot| } {title|{b} {c}}\n\n{per|{d}%}', |
|---|
| | | rich: { |
|---|
| | | title: { |
|---|
| | | color: '#fff' |
|---|
| | | }, |
|---|
| | | per: { |
|---|
| | | color: '#01D9FE' |
|---|
| | | }, |
|---|
| | | dot: { |
|---|
| | | backgroundColor: 'inherit', |
|---|
| | | width: 8, |
|---|
| | | height: 8, |
|---|
| | | borderRadius: 4 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // labelLayout: { |
|---|
| | | // hideOverlap: true |
|---|
| | | // }, |
|---|
| | | endLabel: { |
|---|
| | | show: true, |
|---|
| | | distance: 5, |
|---|
| | | color: "red" |
|---|
| | | }, |
|---|
| | | data: seriesData, |
|---|
| | | emphasis: { |
|---|
| | | itemStyle: { |
|---|
| | | shadowBlur: 10, |
|---|
| | | shadowOffsetX: 0, |
|---|
| | | shadowColor: 'rgba(0, 0, 0, 1)' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | option && myChart.setOption(option); |
|---|
| | | } |
|---|
| | | onUnmounted(() => { |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | clearTimeout(timer1.value) |
|---|
| | | clearTimeout(timer2.value) |
|---|
| | | clearTimeout(timer3.value) |
|---|
| | | clearTimeout(timer4.value) |
|---|
| | | clearTimeout(timer5.value) |
|---|
| | | }) |
|---|
| | | const clickCate = (index) => { |
|---|
| | | clearTimeout(timer1.value) |
|---|
| | | clearTimeout(timer2.value) |
|---|
| | | cate.value.forEach((item, i) => { |
|---|
| | | if (i === index) { |
|---|
| | | // 成品计划进度 |
|---|
| | | if (i == 0) { |
|---|
| | | getWorkPlansList(companyId.value, departId.value) |
|---|
| | | .then(res => { |
|---|
| | | data.plannedProgress = res |
|---|
| | | nextTick(() => { |
|---|
| | | start1() |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } else { |
|---|
| | | getProcedureProcessList(companyId.value, departId.value) |
|---|
| | | .then(res => { |
|---|
| | | data.processProgress = res |
|---|
| | | nextTick(() => { |
|---|
| | | start2() |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | item.active = true |
|---|
| | | } else { |
|---|
| | | item.active = false |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | function handleMouseEnter() { |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | } |
|---|
| | | function handleMouseEnter1() { |
|---|
| | | clearTimeout(timer1.value) |
|---|
| | | } |
|---|
| | | function handleMouseEnter2() { |
|---|
| | | clearTimeout(timer2.value) |
|---|
| | | } |
|---|
| | | function handleMouseEnter3() { |
|---|
| | | clearTimeout(timer3.value) |
|---|
| | | } |
|---|
| | | function handleMouseEnter4() { |
|---|
| | | clearTimeout(timer4.value) |
|---|
| | | } |
|---|
| | | function handleMouseLeave() { |
|---|
| | | start() |
|---|
| | | } |
|---|
| | | function handleMouseLeave1() { |
|---|
| | | start1() |
|---|
| | | } |
|---|
| | | function handleMouseLeave2() { |
|---|
| | | start2() |
|---|
| | | } |
|---|
| | | function handleMouseLeave3() { |
|---|
| | | start3() |
|---|
| | | } |
|---|
| | | function handleMouseLeave4() { |
|---|
| | | start4() |
|---|
| | | } |
|---|
| | | // 开启定时器 |
|---|
| | | function start() { |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | // 定时器触发周期 |
|---|
| | | let speed = ref(100) |
|---|
| | | timer.value = setInterval(ListScroll, speed.value) |
|---|
| | | } |
|---|
| | | // 开启定时器 |
|---|
| | | function start1() { |
|---|
| | | clearTimeout(timer1.value) |
|---|
| | | // 定时器触发周期 |
|---|
| | | let speed1 = ref(100) |
|---|
| | | timer1.value = setInterval(ListScroll1, speed1.value) |
|---|
| | | } |
|---|
| | | // 开启定时器 |
|---|
| | | function start2() { |
|---|
| | | clearTimeout(timer2.value) |
|---|
| | | // 定时器触发周期 |
|---|
| | | let speed2 = ref(100) |
|---|
| | | timer2.value = setInterval(ListScroll2, speed2.value) |
|---|
| | | } |
|---|
| | | // 开启定时器 |
|---|
| | | function start3() { |
|---|
| | | clearTimeout(timer3.value) |
|---|
| | | // 定时器触发周期 |
|---|
| | | let speed3 = ref(100) |
|---|
| | | timer3.value = setInterval(ListScroll3, speed3.value) |
|---|
| | | } |
|---|
| | | // 开启定时器 |
|---|
| | | function start4() { |
|---|
| | | clearTimeout(timer4.value) |
|---|
| | | // 定时器触发周期 |
|---|
| | | let speed4 = ref(100) |
|---|
| | | timer4.value = setInterval(ListScroll4, speed4.value) |
|---|
| | | } |
|---|
| | | function ListScroll() { |
|---|
| | | let scrollDom = scrollContainer.value |
|---|
| | | if (!scrollDom) return |
|---|
| | | // 判读组件是否渲染完成 |
|---|
| | | if (scrollDom.offsetHeight == 0) { |
|---|
| | | scrollDom = scrollContainer.value |
|---|
| | | } else { |
|---|
| | | let maxLength = scrollDom.clientHeight/34 |
|---|
| | | // 如果列表数量过少不进行滚动 |
|---|
| | | if (scrollDom.children.length <= maxLength) { |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // 组件进行滚动 |
|---|
| | | scrollDom.scrollTop += 2 |
|---|
| | | // 判断是否滚动到底部 |
|---|
| | | if (Math.floor(scrollDom.scrollTop) >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
|---|
| | | // 获取组件第一个节点 |
|---|
| | | let first = scrollDom.children[0] |
|---|
| | | // 删除节点 |
|---|
| | | scrollDom.removeChild(first) |
|---|
| | | // 将该节点拼接到组件最后 |
|---|
| | | scrollDom.append(first) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | function ListScroll1() { |
|---|
| | | let scrollDom = scrollContainer1.value |
|---|
| | | // 判读组件是否渲染完成 |
|---|
| | | if (!scrollDom) return |
|---|
| | | if (scrollDom.offsetHeight == 0) { |
|---|
| | | scrollDom = scrollContainer1.value |
|---|
| | | } else { |
|---|
| | | // 如果列表数量过少不进行滚动 |
|---|
| | | if (scrollDom.children.length <= 6) { |
|---|
| | | clearTimeout(timer1.value) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // console.log(data.plannedProgress); |
|---|
| | | // 组件进行滚动 |
|---|
| | | scrollDom.scrollTop += 2 |
|---|
| | | // scrollDom.scrollTo(0, scrollDom.scrollTop + 3) |
|---|
| | | // console.log('2-----',scrollDom.scrollTop, scrollDom.scrollHeight, scrollDom.clientHeight ); |
|---|
| | | // 判断是否滚动到底部 |
|---|
| | | if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
|---|
| | | // 获取组件第一个节点 |
|---|
| | | let first = scrollDom.children[0] |
|---|
| | | // 删除节点 |
|---|
| | | scrollDom.removeChild(first) |
|---|
| | | // 将该节点拼接到组件最后 |
|---|
| | | scrollDom.append(first) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | function ListScroll2() { |
|---|
| | | let scrollDom = scrollContainer2.value |
|---|
| | | if (!scrollDom) return |
|---|
| | | // 判读组件是否渲染完成 |
|---|
| | | if (scrollDom.offsetHeight == 0) { |
|---|
| | | scrollDom = scrollContainer2.value |
|---|
| | | } else { |
|---|
| | | // 如果列表数量过少不进行滚动 |
|---|
| | | if (scrollDom.children.length <= 10) { |
|---|
| | | clearTimeout(timer2.value) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // 组件进行滚动 |
|---|
| | | scrollDom.scrollTo(0, scrollDom.scrollTop + 1) // += 1 |
|---|
| | | // scrollDom.scrollTop(scrollDom.scrollTop + 1) |
|---|
| | | // console.log('scrollDom.scrollTop', scrollDom.scrollTop); |
|---|
| | | // console.log('scrollDom.scrollHeight - scrollDom.clientHeight', scrollDom.scrollHeight - scrollDom.clientHeight); |
|---|
| | | // 判断是否滚动到底部 |
|---|
| | | if (scrollDom.scrollTop &&scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
|---|
| | | // 获取组件第一个节点 |
|---|
| | | let first = scrollDom.children[0] |
|---|
| | | // 删除节点 |
|---|
| | | scrollDom.removeChild(first) |
|---|
| | | // 将该节点拼接到组件最后 |
|---|
| | | scrollDom.append(first) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | function ListScroll3() { |
|---|
| | | let scrollDom = scrollContainer3.value |
|---|
| | | if (!scrollDom) return |
|---|
| | | // 判读组件是否渲染完成 |
|---|
| | | if (scrollDom.offsetHeight == 0) { |
|---|
| | | scrollDom = scrollContainer3.value |
|---|
| | | } else { |
|---|
| | | // 如果列表数量过少不进行滚动 |
|---|
| | | let num = scrollContainer3.value.offsetHeight / 35; |
|---|
| | | // alert(scrollDom.children.length +"---------------"+num) |
|---|
| | | // 如果列表数量过少不进行滚动 |
|---|
| | | if (scrollDom.children.length <= num) { |
|---|
| | | clearTimeout(timer3.value) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // 组件进行滚动 |
|---|
| | | scrollDom.scrollTop = scrollDom.scrollTop+2 |
|---|
| | | // 判断是否滚动到底部 |
|---|
| | | if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
|---|
| | | // 获取组件第一个节点 |
|---|
| | | let first = scrollDom.children[0] |
|---|
| | | // 删除节点 |
|---|
| | | scrollDom.removeChild(first) |
|---|
| | | // 将该节点拼接到组件最后 |
|---|
| | | scrollDom.append(first) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | function ListScroll4() { |
|---|
| | | let scrollDom = scrollContainer4.value |
|---|
| | | if (!scrollDom) return |
|---|
| | | // 判读组件是否渲染完成 |
|---|
| | | if (scrollDom.scrollTop && scrollDom.offsetHeight == 0) { |
|---|
| | | scrollDom = scrollContainer4.value |
|---|
| | | } else { |
|---|
| | | // console.log(scrollDom.offsetHeight); |
|---|
| | | let num = scrollDom.offsetHeight / 35; |
|---|
| | | num = num + (scrollDom.offsetHeight % 35 > 0 ? 1 : 0) |
|---|
| | | if (scrollDom.children.length <= num) { |
|---|
| | | clearTimeout(timer4.value) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | // 组件进行滚动 |
|---|
| | | scrollDom.scrollTop += 1 |
|---|
| | | |
|---|
| | | // 判断是否滚动到底部 |
|---|
| | | if (scrollDom.scrollTop && scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) { |
|---|
| | | // if (scrollDom.scrollTop >= 35) { |
|---|
| | | |
|---|
| | | // 获取组件第一个节点 |
|---|
| | | let first = scrollDom.children[0] |
|---|
| | | // 删除节点 |
|---|
| | | scrollDom.removeChild(first) |
|---|
| | | // 将该节点拼接到组件最后 |
|---|
| | | scrollDom.append(first) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // onUnmounted(() => { |
|---|
| | | |
|---|
| | | // }) |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | if (departId.value) { |
|---|
| | | console.log('onMounted'); |
|---|
| | | init() |
|---|
| | | timer5.value = setInterval(init, 60000) |
|---|
| | | // timer.value = setInterval(scrillAction, 100) |
|---|
| | | } |
|---|
| | | window.addEventListener('resize', () => { |
|---|
| | | setTypeChart() |
|---|
| | | setDayChart() |
|---|
| | | }) |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | onUnmounted(() => { |
|---|
| | | clearTimeout(timer.value) |
|---|
| | | clearTimeout(timer5.value) |
|---|
| | | |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .content1 { |
|---|
| | | |
|---|
| | | $fixed-height: 690px; |
|---|
| | | .content1 { |
|---|
| | | flex: 1; |
|---|
| | | width: 100%; |
|---|
| | | height: auto; |
|---|
| | | display: flex; |
|---|
| | | align-items: start; |
|---|
| | | justify-content: space-between; |
|---|
| | | |
|---|
| | | .content_left { |
|---|
| | | flex: 1; |
|---|
| | | margin-right: 20px; |
|---|
| | | .content_left_item1 { |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100vh - 690px); |
|---|
| | | // height: 284px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | .content_left_item1_head { |
|---|
| | | background: url('@/assets/img/home_title_short@2x.png'); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | width: 100%; |
|---|
| | | height: auto; |
|---|
| | | height: 38px; |
|---|
| | | line-height: 38px; |
|---|
| | | padding-left: 34px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-size: 16px; |
|---|
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #FFFFFF; |
|---|
| | | line-height: 24px; |
|---|
| | | text-shadow: 0px 0px 10px rgba(0, 24, 72, 0.75); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content_left_item1_content { |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 36px); |
|---|
| | | padding: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | 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; |
|---|
| | | padding: 7px 0; |
|---|
| | | |
|---|
| | | &: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; |
|---|
| | | font-weight: 400; |
|---|
| | | color: #D2E0FF; |
|---|
| | | margin-left: 9px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .num { |
|---|
| | | width: 20px; |
|---|
| | | height: 20px; |
|---|
| | | line-height: 20px; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 12px; |
|---|
| | | font-family: SourceHanSansSC-Medium, SourceHanSansSC; |
|---|
| | | 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; |
|---|
| | | font-family: SourceHanSansSC-Regular, SourceHanSansSC; |
|---|
| | | font-weight: 400; |
|---|
| | | color: #D2E0FF; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content_left_item2 { |
|---|
| | | width: 100%; |
|---|
| | | flex: 1; |
|---|
| | | .content_left_item2_head { |
|---|
| | | background: url('@/assets/img/home_title_short@2x.png'); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | width: 100%; |
|---|
| | | height: 38px; |
|---|
| | | line-height: 38px; |
|---|
| | | padding-left: 34px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-size: 16px; |
|---|
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #FFFFFF; |
|---|
| | | line-height: 24px; |
|---|
| | | text-shadow: 0px 0px 10px rgba(0, 24, 72, 0.75); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content_left_item2_content { |
|---|
| | | width: 100%; |
|---|
| | | height: 361px; |
|---|
| | | 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: 35px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | background: rgba(52, 88, 159, 0.5); |
|---|
| | | |
|---|
| | | .item2_content_head_item { |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 13px; |
|---|
| | | font-family: PingFangSC-Medium, PingFang SC; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #01D9FE; |
|---|
| | | |
|---|
| | | &:first-child { |
|---|
| | | flex: 1.5; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main_container { |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 38px); |
|---|
| | | |
|---|
| | | .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: 35px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | .scroll_item_row { |
|---|
| | | flex: 1; |
|---|
| | | width: 0; |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | white-space: nowrap; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 13px; |
|---|
| | | |
|---|
| | | &:first-child { |
|---|
| | | flex: 1.5; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content_center { |
|---|
| | | flex: 3; |
|---|
| | | margin-right: 20px; |
|---|
| | | .content_center_top { |
|---|
| | | width: 100%; |
|---|
| | | height: 424px; |
|---|
| | | 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: 35px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | .content_left { |
|---|
| | | flex: 1; |
|---|
| | | .content_left_item1 { |
|---|
| | | width: 100%; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | .content_left_item1_head { |
|---|
| | | background: url('@/assets/img/home_title_short@2x.png'); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | width: 100%; |
|---|
| | | height: 38px; |
|---|
| | | line-height: 38px; |
|---|
| | | padding-left: 34px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | span { |
|---|
| | | font-size: 16px; |
|---|
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #FFFFFF; |
|---|
| | | line-height: 24px; |
|---|
| | | 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; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | span { |
|---|
| | | font-size: 13px; |
|---|
| | | font-family: SourceHanSansSC-Regular, SourceHanSansSC; |
|---|
| | | font-weight: 400; |
|---|
| | | color: #D2E0FF; |
|---|
| | | margin-left: 9px; |
|---|
| | | } |
|---|
| | | .num { |
|---|
| | | width: 20px; |
|---|
| | | height: 20px; |
|---|
| | | line-height: 20px; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 12px; |
|---|
| | | font-family: SourceHanSansSC-Medium, SourceHanSansSC; |
|---|
| | | 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; |
|---|
| | | font-family: SourceHanSansSC-Regular, SourceHanSansSC; |
|---|
| | | font-weight: 400; |
|---|
| | | color: #D2E0FF; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .content_left_item2 { |
|---|
| | | width: 100%; |
|---|
| | | .content_left_item2_head { |
|---|
| | | background: url('@/assets/img/home_title_short@2x.png'); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | width: 100%; |
|---|
| | | height: 38px; |
|---|
| | | line-height: 38px; |
|---|
| | | padding-left: 34px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | span { |
|---|
| | | font-size: 16px; |
|---|
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #FFFFFF; |
|---|
| | | line-height: 24px; |
|---|
| | | text-shadow: 0px 0px 10px rgba(0,24,72,0.75); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .content_left_item2_content { |
|---|
| | | width: 100%; |
|---|
| | | height: 361px; |
|---|
| | | 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%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 13px; |
|---|
| | | 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; |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .bg3 { |
|---|
| | | background: url('@/assets/img/tab_select_grey@2x.png'); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | .content_center { |
|---|
| | | flex: 2; |
|---|
| | | margin: 0 40px; |
|---|
| | | background-color: aquamarine; |
|---|
| | | |
|---|
| | | .bg4 { |
|---|
| | | background: url('@/assets/img/tab_select@2x.png'); |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | .content_right { |
|---|
| | | .content_center_top_list_item { |
|---|
| | | width: 200px; |
|---|
| | | height: 35px; |
|---|
| | | cursor: pointer; |
|---|
| | | line-height: 35px; |
|---|
| | | padding-left: 34px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | font-size: 16px; |
|---|
| | | font-family: SourceHanSansSC-Bold, SourceHanSansSC; |
|---|
| | | font-weight: bold; |
|---|
| | | 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; |
|---|
| | | background-color: aquamarine; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 13px; |
|---|
| | | font-family: PingFangSC-Medium, PingFang SC; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #01D9FE; |
|---|
| | | |
|---|
| | | &:nth-child(5) { |
|---|
| | | flex: 3; |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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: 50px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | .scroll_item_row { |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | white-space: nowrap; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | color: #FFFFFF; |
|---|
| | | font-size: 13px; |
|---|
| | | |
|---|
| | | &:nth-child(5) { |
|---|
| | | flex: 3; |
|---|
| | | justify-content: start; |
|---|
| | | } |
|---|
| | | .scroll_item_row_item { |
|---|
| | | margin-top: -11px; |
|---|
| | | width: 29px; |
|---|
| | | height: 29px; |
|---|
| | | border-radius: 50%; |
|---|
| | | margin-right: 19px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | 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; |
|---|
| | | bottom: -10px; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%, 45%); |
|---|
| | | font-size: 12px; |
|---|
| | | font-family: PingFangSC-Regular, PingFang SC; |
|---|
| | | font-weight: 400; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .scroll_item_row_item_x { |
|---|
| | | position: absolute; |
|---|
| | | right: -85%; |
|---|
| | | top: 50%; |
|---|
| | | transform: translate(0, -50%); |
|---|
| | | width: 19px; |
|---|
| | | height: 2px; |
|---|
| | | background-color: #01D9FE; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 13px; |
|---|
| | | font-family: PingFangSC-Medium, PingFang SC; |
|---|
| | | font-weight: 500; |
|---|
| | | 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: 35px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | .scroll_item_row { |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | white-space: nowrap; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 13px; |
|---|
| | | justify-content: center; |
|---|
| | | color: #FFFFFF; |
|---|
| | | |
|---|
| | | .scroll_item_row_item { |
|---|
| | | width: 29px; |
|---|
| | | height: 29px; |
|---|
| | | border-radius: 50%; |
|---|
| | | margin-right: 19px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | border: 2px solid #01D9FE; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | .content_center_bottom { |
|---|
| | | width: 100%; |
|---|
| | | // height: 284px; |
|---|
| | | height: calc(100vh - 690px); |
|---|
| | | flex: 2; |
|---|
| | | .content_center_bottom_head { |
|---|
| | | width: 100%; |
|---|
| | | height: 38px; |
|---|
| | | line-height: 38px; |
|---|
| | | padding-left: 34px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | background: linear-gradient(270deg, rgba(21, 103, 255, 0) 0%, rgba(21, 103, 255, 0.61) 100%); |
|---|
| | | border-radius: 10px 0px 0px 0px; |
|---|
| | | 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; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #FFFFFF; |
|---|
| | | 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%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 13px; |
|---|
| | | 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: 35px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | .scroll_item_row { |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | white-space: nowrap; |
|---|
| | | display: flex; |
|---|
| | | font-size: 13px; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | color: #FFFFFF; |
|---|
| | | |
|---|
| | | &:nth-child(4) { |
|---|
| | | flex: 2; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content_right { |
|---|
| | | flex: 1; |
|---|
| | | .content_right_top { |
|---|
| | | width: 100%; |
|---|
| | | height: 425px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | |
|---|
| | | .content_right_top_head { |
|---|
| | | width: 100%; |
|---|
| | | height: 38px; |
|---|
| | | line-height: 38px; |
|---|
| | | padding-left: 34px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | 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; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #FFFFFF; |
|---|
| | | 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; |
|---|
| | | #pieChart { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | .content_right_top_nr_bottom_yuan { |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | left: 50%; |
|---|
| | | transform: translate(-50%, -50%); |
|---|
| | | z-index: 999; |
|---|
| | | width: 100px; |
|---|
| | | height: 100px; |
|---|
| | | border-radius: 50%; |
|---|
| | | border: 2px dashed #01D9FE; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | &:first-child { |
|---|
| | | font-size: 26px; |
|---|
| | | font-family: SourceHanSansSC-Medium, SourceHanSansSC; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &:last-child { |
|---|
| | | font-size: 13px; |
|---|
| | | font-family: SourceHanSansSC-Regular, SourceHanSansSC; |
|---|
| | | font-weight: 400; |
|---|
| | | color: rgba(255, 255, 255, 0.8); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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%; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content_right_bottom { |
|---|
| | | width: 100%; |
|---|
| | | // height: 284px; |
|---|
| | | |
|---|
| | | height: calc(100vh - 690px); |
|---|
| | | .content_right_bottom_head { |
|---|
| | | width: 100%; |
|---|
| | | height: 38px; |
|---|
| | | line-height: 38px; |
|---|
| | | padding-left: 34px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | 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; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #FFFFFF; |
|---|
| | | 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: 35px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | background: rgba(52, 88, 159, 0.5); |
|---|
| | | |
|---|
| | | .item2_content_head_item { |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | font-size: 13px; |
|---|
| | | font-family: PingFangSC-Medium, PingFang SC; |
|---|
| | | font-weight: 500; |
|---|
| | | color: #01D9FE; |
|---|
| | | |
|---|
| | | &:first-child { |
|---|
| | | flex: 2; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .main_container { |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 35px); |
|---|
| | | |
|---|
| | | .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: 35px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | .scroll_item_row { |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | white-space: nowrap; |
|---|
| | | font-size: 13px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | color: #FFFFFF; |
|---|
| | | |
|---|
| | | &:first-child { |
|---|
| | | flex: 2; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }</style> |
|---|
| | | |
|---|
