| | |
| | | <template> |
| | | <div class="main"> |
| | | <div class="main_left"> |
| | | <div class="main_left_head"> |
| | | <div class="head_item"> |
| | | <div class="head_item_left"> |
| | | <span>待办工单</span> |
| | | <span>{{obj.waitDealWorkOrderSize || 0}}</span> |
| | | <span @click="jump(1)">查看更多</span> |
| | | </div> |
| | | <img class="head_item_icon" src="@/assets/indexIcon/ic_daibangongdan@2x.png" /> |
| | | <div class="main_home" style="padding-bottom: 30px;"> |
| | | <div class="home_header"> |
| | | <div class="mb10 fs17">下午好,{{ userInfo.realname }}</div> |
| | | <div class="fs13"> |
| | | 今天是 {{ nowDate }} {{ nowWeek }},欢迎访问豆米跳跳官网后台管理平台 |
| | | </div> |
| | | <div style="border: 1px solid #cccccc;padding: 20px;margin-top: 30px;"> |
| | | <div style="font-size: 20px;font-weight: bold;color: #144077"> |
| | | 【PC网站静态化】 |
| | | </div> |
| | | <div class="head_item"> |
| | | <div class="head_item_left"> |
| | | <span>待巡检</span> |
| | | <span>{{obj.waitTaskSize || 0}}</span> |
| | | <span @click="jump(2)">查看更多</span> |
| | | </div> |
| | | <img class="head_item_icon" src="@/assets/indexIcon/ic_daixuncha@2x.png" /> |
| | | <div class="content"> |
| | | <el-button class="btn" :loading="loading[0]" type="primary" @click="staticPage(0)">首页</el-button> |
| | | <el-button class="btn" :loading="loading[6]" type="primary" @click="staticPage(6)">Alot物联</el-button> |
| | | <el-button class="btn" :loading="loading[5]" type="primary" @click="staticPage(5)">最新动态</el-button> |
| | | <el-button class="btn" :loading="loading[3]" type="primary" @click="staticPage(3)">关于我们</el-button> |
| | | <el-button class="btn" :loading="loading[4]" type="primary" @click="staticPage(4)">渠道合作</el-button> |
| | | </div> |
| | | <div class="head_item"> |
| | | <div class="head_item_left"> |
| | | <span>待盘点</span> |
| | | <span>{{obj.stocktakingSize || 0}}</span> |
| | | <span @click="jump(3)">查看更多</span> |
| | | </div> |
| | | <img class="head_item_icon" src="@/assets/indexIcon/ic_daipandian@2x.png" /> |
| | | <div class="content"> |
| | | <el-button class="btn" :loading="loading[7]" type="primary" @click="staticPage(7)">最新动态详情</el-button> |
| | | <el-button class="btn" :loading="loading[9]" type="primary" @click="staticPage(9)">客户案例详情</el-button> |
| | | <el-button class="btn" :loading="loading[9]" type="primary" @click="staticPage(14)">轮播图详情</el-button> |
| | | </div> |
| | | <div style="font-size: 20px;font-weight: bold;margin-top: 30px;color: #144077"> |
| | | 【智慧系统静态化】 |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn" :loading="loading[1]" type="primary" @click="staticPage(1)">智慧系统运营系统</el-button> |
| | | <el-button class="btn" :loading="loading[2]" type="primary" @click="staticPage(2)">智慧系统运维系统</el-button> |
| | | </div> |
| | | <div style="font-size: 20px;font-weight: bold;margin-top: 30px;color: #144077"> |
| | | 【解决方案静态化】 |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn" :loading="loading[8]" type="primary" @click="staticPage(8)">数智体育场馆</el-button> |
| | | <el-button class="btn" :loading="loading[10]" type="primary" @click="staticPage(10)">24H智能场馆</el-button> |
| | | <el-button class="btn" :loading="loading[11]" type="primary" @click="staticPage(11)">景区&游乐园</el-button> |
| | | <el-button class="btn" :loading="loading[12]" type="primary" @click="staticPage(12)">数智体育平台</el-button> |
| | | <el-button class="btn" :loading="loading[13]" type="primary" @click="staticPage(13)">空间智慧管理</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="main_left_menu"> |
| | | <div class="main_left_menu_title"> |
| | | <span>常用功能</span> |
| | | <div class="main_left_menu_title_edit" @click="$refs.commonFunctions.open('常用功能管理')"> |
| | | <img src="@/assets/indexIcon/ic_daibangongdan@2x.png" /> |
| | | <span>自定义功能</span> |
| | | </div> |
| | | <div style="border: 1px solid #cccccc;padding: 20px;margin-top: 30px;"> |
| | | <div style="font-size: 20px;font-weight: bold; color: #144077"> |
| | | 【手机端静态化】 |
| | | </div> |
| | | <div class="main_left_menu_list"> |
| | | <div class="list_item" v-for="(item, index) in list" :key="index" @click="jump1(item.path)"> |
| | | <div class="list_item_left"> |
| | | <img :src="item.icoPath" /> |
| | | <span>{{item.name}}</span> |
| | | </div> |
| | | <i class="el-icon-arrow-right"></i> |
| | | </div> |
| | | <div class="list_item1"></div> |
| | | <div class="list_item1"></div> |
| | | <div class="list_item1"></div> |
| | | <div class="content"> |
| | | <el-button class="btn1" :loading="loadingMobile[0]" type="primary" @click="staticPageMobile(0)">首页</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[21]" type="primary" @click="staticPageMobile(21)">景区&游乐园</el-button> |
| | | <el-button class="btn1" :loading="loading[18]" type="primary" @click="staticPageMobile(18)">客户案例详情</el-button> |
| | | <el-button class="btn1" :loading="loading[19]" type="primary" @click="staticPageMobile(19)">轮播图详情</el-button> |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn1" :loading="loadingMobile[20]" type="primary" @click="staticPageMobile(20)">渠道合作</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[21]" type="primary" @click="staticPageMobile(21)">关于我们</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[16]" type="primary" @click="staticPageMobile(16)">最新动态</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[22]" type="primary" @click="staticPageMobile(22)">最新动态列表</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[17]" type="primary" @click="staticPageMobile(17)">最新动态详情</el-button> |
| | | </div> |
| | | <div style="font-size: 20px;font-weight: bold;margin-top: 30px;color: #144077"> |
| | | 【首页解决方案】 |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn1" :loading="loading[11]" type="primary" @click="staticPageMobile(11)">数智体育场馆</el-button> |
| | | <el-button class="btn1" :loading="loading[12]" type="primary" @click="staticPageMobile(12)">24H智能场馆</el-button> |
| | | <el-button class="btn1" :loading="loading[13]" type="primary" @click="staticPageMobile(13)">数智体育平台</el-button> |
| | | <el-button class="btn1" :loading="loading[14]" type="primary" @click="staticPageMobile(14)">景区&游乐园</el-button> |
| | | <el-button class="btn1" :loading="loading[15]" type="primary" @click="staticPageMobile(15)">空间智慧管理</el-button> |
| | | </div> |
| | | <div style="font-size: 20px;font-weight: bold; color: #144077;margin-top: 30px;"> |
| | | 【智慧系统】 |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn1" :loading="loadingMobile[1]" type="primary" @click="staticPageMobile(1)">智慧系统运营系统</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[2]" type="primary" @click="staticPageMobile(2)">智慧系统运维系统</el-button> |
| | | </div> |
| | | <div style="font-size: 20px;font-weight: bold; color: #144077;margin-top: 30px;"> |
| | | 【数智体育场馆】 |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn1" :loading="loadingMobile[3]" type="primary" @click="staticPageMobile(3)">综合体育场馆</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[4]" type="primary" @click="staticPageMobile(4)">全民健身中心</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[5]" type="primary" @click="staticPageMobile(5)">校园体育场馆</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[6]" type="primary" @click="staticPageMobile(6)">冰雪体育场馆</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[7]" type="primary" @click="staticPageMobile(7)">游泳体育场馆</el-button> |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn1" :loading="loadingMobile[8]" type="primary" @click="staticPageMobile(8)">智慧体育公园</el-button> |
| | | </div> |
| | | <div style="font-size: 20px;font-weight: bold; color: #144077;margin-top: 30px;"> |
| | | 【24H智能场馆】 |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn1" :loading="loadingMobile[9]" type="primary" @click="staticPageMobile(9)">24H智能场馆</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[10]" type="primary" @click="staticPageMobile(10)">无人值守场馆</el-button> |
| | | </div> |
| | | <div style="font-size: 20px;font-weight: bold; color: #144077;margin-top: 30px;"> |
| | | 【数智体育平台】 |
| | | </div> |
| | | <div class="content"> |
| | | <el-button class="btn1" :loading="loadingMobile[11]" type="primary" @click="staticPageMobile(11)">体育连锁运营平台</el-button> |
| | | <el-button class="btn1" :loading="loadingMobile[12]" type="primary" @click="staticPageMobile(12)">省市级数智体育场馆</el-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="main_right"> |
| | | <div class="main_right_title">日程</div> |
| | | <div class="main_right_search"> |
| | | <el-select v-model="nian" style="width: 150px; margin-right: 15px;" @change="getMonthNoticess" placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in yearList" |
| | | :key="item.val" |
| | | :label="item.name" |
| | | :value="item.val"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-select v-model="yue" style="width: 150px;" @change="getMonthNoticess" placeholder="请选择"> |
| | | <el-option |
| | | v-for="(item, index) in 12" |
| | | :key="index" |
| | | :label="item + '月'" |
| | | :value="item > 9 ? item : `0${item}`"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="main_right_date"> |
| | | <Calendar |
| | | ref="Calendar" |
| | | v-on:choseDay="clickDay" |
| | | :markDateMore="markDateMore" |
| | | ></Calendar> |
| | | </div> |
| | | <div class="main_right_rc"> |
| | | <div class="main_right_rc_title">当日日程({{dataList.length}})</div> |
| | | <div class="main_right_rc_list" v-loading="loading"> |
| | | <div class="main_right_rc_list_row" v-for="(item, index) in dataList" :key="index"> |
| | | <div class="top"> |
| | | <div class="top_left"> |
| | | <div class="top_left_dian"></div> |
| | | <div class="top_left_title">{{item.title}}</div> |
| | | </div> |
| | | <div class="top_date">{{item.param1}}</div> |
| | | </div> |
| | | <div class="bottom"> |
| | | {{item.content}} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <CommonFunctions ref="commonFunctions" @success="getYwQuickLists" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import CommonFunctions from '@/components/business/commonFunctions' |
| | | import { getYwQuickList, getMonthNotices, workDeskData } from '@/api/ywWorkDesk' |
| | | import Calendar from 'vue-calendar-component' |
| | | import dayjs from 'dayjs' |
| | | import { weeks } from '@/utils/config' |
| | | import { create as createPage ,createMobile as createPageMobile} from '@/api/business/static' |
| | | export default { |
| | | data() { |
| | | components: { |
| | | }, |
| | | data () { |
| | | return { |
| | | list: [], |
| | | value: new Date(), |
| | | yearList: [], |
| | | markDateMore: [], |
| | | nian: '', |
| | | yue: '', |
| | | obj: {}, |
| | | dataList: [], |
| | | loading: false |
| | | loading:[false,false,false,false,false,false,false,false,false,false], |
| | | loadingMobile:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false] |
| | | } |
| | | }, |
| | | components: { CommonFunctions, Calendar }, |
| | | computed: { |
| | | userInfo () { |
| | | return this.$store.state.userInfo |
| | | } |
| | | }, |
| | | created () { |
| | | this.getWorkDeskData() |
| | | this.getYwQuickLists() |
| | | this.getYear() |
| | | }, |
| | | mounted () { |
| | | this.updateDate() |
| | | // this.initData() |
| | | }, |
| | | methods: { |
| | | getYear() { |
| | | let currentYear = new Date().getFullYear(); |
| | | let currentMonth = new Date().getMonth() + 1; |
| | | this.nian = currentYear |
| | | this.yue = currentMonth > 9 ? currentMonth : `0${currentMonth}` |
| | | for (let i = currentYear - 10; i <= currentYear; i++) { |
| | | this.yearList.unshift({ name: i + '年', val: i }) |
| | | } |
| | | this.getMonthNoticess() |
| | | }, |
| | | // 获取代办 |
| | | getWorkDeskData() { |
| | | workDeskData({}) |
| | | .then(res => { |
| | | this.obj = res |
| | | }) |
| | | }, |
| | | clickDay(e) { |
| | | this.loading = true |
| | | let date = e.replace("/\\//g", "-") |
| | | let arr = this.markDateMore.filter(item => { |
| | | if (item.date === date) { |
| | | return item |
| | | } |
| | | }) |
| | | if (arr.length > 0) { |
| | | this.dataList = arr[0].noticeList |
| | | } else { |
| | | this.dataList = [] |
| | | } |
| | | this.loading = false |
| | | }, |
| | | // 获取日程 |
| | | getMonthNoticess() { |
| | | getMonthNotices(this.nian + '-' + this.yue).then(res => { |
| | | let arr = res.filter(item => { |
| | | if (item.noticeList && item.noticeList.length > 0) { |
| | | return item |
| | | } |
| | | }) |
| | | this.markDateMore = arr.map(item => { |
| | | return { date: item.monthDate.replace("/-0/g", "-"), className: 'markRed', noticeList: item.noticeList } |
| | | }) |
| | | let toDay = this.getDay() |
| | | this.markDateMore.forEach(item => { |
| | | if (item.date === toDay) { |
| | | this.dataList = item.noticeList |
| | | } |
| | | }) |
| | | this.$refs.Calendar.ChoseMonth(`${this.nian}-${this.yue}`, false) |
| | | staticPage (index) { |
| | | this.loading[index] = true |
| | | createPage({ pageIndex: index }).then(res => { |
| | | this.$message.success('操作成功') |
| | | }).catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }).finally(() => { |
| | | this.loading[index] = false |
| | | }) |
| | | }, |
| | | getYwQuickLists() { |
| | | getYwQuickList({}) |
| | | .then(res => { |
| | | this.list = res |
| | | }) |
| | | staticPageMobile (index) { |
| | | this.loadingMobile[index] = true |
| | | createPageMobile({ pageIndex: index }).then(res => { |
| | | this.$message.success('操作成功') |
| | | }).catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }).finally(() => { |
| | | this.loading[index] = false |
| | | }) |
| | | }, |
| | | getDay() { |
| | | let date = new Date(); |
| | | let year = date.getFullYear(); // 获取年份 |
| | | let month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份,并补零 |
| | | let day = String(date.getDate()).padStart(2, '0'); // 获取日期,并补零 |
| | | |
| | | return `${year}-${month}-${day}`; |
| | | }, |
| | | jump(type) { |
| | | if (type === 1) { |
| | | this.$router.push({ path: '/workorder/workorderList' }) |
| | | } else if (type === 2) { |
| | | this.$router.push({ path: '/Inspection/task' }) |
| | | } else if (type === 3) { |
| | | this.$router.push({ path: '/stock/check' }) |
| | | } |
| | | }, |
| | | jump1(path) { |
| | | this.$router.push({ path }) |
| | | updateDate () { |
| | | this.nowDate = dayjs().format('YYYY年M月D日') |
| | | this.nowWeek = weeks[new Date().getDay()] |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .main { |
| | | width: 100%; |
| | | padding: 15px; |
| | | box-sizing: border-box; |
| | | background: #F4F7FC; |
| | | display: flex; |
| | | align-items: self-start; |
| | | justify-content: space-between; |
| | | .main_left { |
| | | flex: 1; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .main_left_head { |
| | | width: 100%; |
| | | height: 199px; |
| | | background: #FFFFFF; |
| | | border-radius: 8px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .head_item { |
| | | flex: 1; |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | background: #F1F5FF; |
| | | border-radius: 8px; |
| | | margin-right: 15px; |
| | | padding: 28px 20px; |
| | | box-sizing: border-box; |
| | | &:last-child { |
| | | margin: 0 !important; |
| | | } |
| | | .head_item_left { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | span { |
| | | &:nth-child(1) { |
| | | font-weight: 600; |
| | | font-size: 17px; |
| | | color: #222222; |
| | | } |
| | | &:nth-child(2) { |
| | | font-weight: 600; |
| | | font-size: 30px; |
| | | color: #111111; |
| | | margin-top: 6px; |
| | | margin-bottom: 14px; |
| | | } |
| | | &:nth-child(3) { |
| | | font-weight: 400; |
| | | font-size: 13px; |
| | | color: #999999; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | .head_item_icon { |
| | | width: 60px; |
| | | height: 60px; |
| | | } |
| | | } |
| | | } |
| | | .main_left_menu { |
| | | width: 100%; |
| | | height: calc(100% - 214px); |
| | | background: #FFFFFF; |
| | | border-radius: 8px; |
| | | margin-top: 15px; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .main_left_menu_title { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | span { |
| | | font-weight: 600; |
| | | font-size: 18px; |
| | | color: #222222; |
| | | } |
| | | .main_left_menu_title_edit { |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | | width: 15px; |
| | | height: 15px; |
| | | } |
| | | span { |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #3E80EF; |
| | | margin-left: 5px; |
| | | } |
| | | } |
| | | } |
| | | .main_left_menu_list { |
| | | width: 100%; |
| | | margin-top: 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | justify-content: space-between; |
| | | .list_item1 { |
| | | width: 24%; |
| | | height: 0; |
| | | } |
| | | .list_item { |
| | | cursor: pointer; |
| | | width: 24%; |
| | | height: 70px; |
| | | background: #FFFFFF; |
| | | border-radius: 8px; |
| | | border: 1px solid #EEEEEE; |
| | | padding: 0 16px; |
| | | box-sizing: border-box; |
| | | margin-bottom: 15px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .list_item_left { |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | | width: 40px; |
| | | height: 40px; |
| | | margin-right: 5px; |
| | | } |
| | | span { |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #222222; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .main_right { |
| | | flex-shrink: 0; |
| | | width: 500px; |
| | | height: 100%; |
| | | margin-left: 15px; |
| | | background: #FEFEFF; |
| | | border-radius: 8px; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .main_right_title { |
| | | font-weight: 600; |
| | | font-size: 18px; |
| | | color: #222222; |
| | | margin-bottom: 12px; |
| | | } |
| | | .main_right_rc { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .main_right_rc_title { |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | color: #222222; |
| | | margin-bottom: 15px; |
| | | } |
| | | .main_right_rc_list { |
| | | width: 100%; |
| | | height: 300px; |
| | | overflow-y: scroll; |
| | | .main_right_rc_list_row { |
| | | width: 100%; |
| | | padding: 15px; |
| | | box-sizing: border-box; |
| | | background: #F4F7FC; |
| | | border-radius: 2px; |
| | | margin-bottom: 10px; |
| | | .top { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .top_left { |
| | | display: flex; |
| | | align-items: center; |
| | | .top_left_dian { |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 50%; |
| | | background: #FF9E00; |
| | | margin-right: 10px; |
| | | } |
| | | .top_left_title { |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #222222; |
| | | } |
| | | } |
| | | .top_date { |
| | | font-weight: 400; |
| | | font-size: 12px; |
| | | color: #999999; |
| | | } |
| | | } |
| | | .bottom { |
| | | font-weight: 400; |
| | | font-size: 13px; |
| | | color: #666666; |
| | | margin-top: 8px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .main_right_date { |
| | | width: 100%; |
| | | padding-top: 15px; |
| | | box-sizing: border-box; |
| | | ::v-deep .wh_content_item { |
| | | height: 50px; |
| | | color: #222222; |
| | | font-weight: 400; |
| | | font-size: 15px; |
| | | } |
| | | ::v-deep .wh_item_date { |
| | | width: 30px; |
| | | height: 30px; |
| | | font-size: 15px; |
| | | } |
| | | ::v-deep .wh_content_all { |
| | | background-color: #ffffff; |
| | | } |
| | | ::v-deep .wh_top_changge { |
| | | display: none; |
| | | } |
| | | ::v-deep .wh_container { |
| | | max-width: 100%; |
| | | } |
| | | ::v-deep .wh_content_item .wh_isToday { |
| | | background-color: rgba(62, 128, 239, 0.47); |
| | | color: #ffffff; |
| | | } |
| | | ::v-deep .wh_item_date:hover { |
| | | background-color: #3E80EF; |
| | | border-radius: 50%; |
| | | color: #ffffff; |
| | | } |
| | | ::v-deep .wh_content_item .wh_chose_day { |
| | | background: #3E80EF; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .markRed { |
| | | position: relative; |
| | | } |
| | | ::v-deep .markRed::after { |
| | | content: '●'; |
| | | color: #FF9E00; |
| | | font-size: 11px; |
| | | position: absolute; |
| | | bottom: -30px; |
| | | left: 50%; |
| | | transform: translate(-50%, 0); |
| | | } |
| | | } |
| | | } |
| | | |
| | | div { |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .home_title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | color: #222222; |
| | | line-height: 22px; |
| | | } |
| | | .content { |
| | | display: flex; |
| | | margin-top: 30px; |
| | | width: 100%; |
| | | .btn{ |
| | | width: 18%; |
| | | height: 60px; |
| | | margin: 10px; |
| | | font-size: 20px; |
| | | } |
| | | .btn1{ |
| | | width: 18%; |
| | | height: 60px; |
| | | margin: 10px; |
| | | font-size: 20px; |
| | | background-color: #f76920; |
| | | border: #f76920; |
| | | } |
| | | } |
| | | |
| | | .main_home { |
| | | background: #f4f7fc; |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: auto; |
| | | padding: 92px 20px 20px; |
| | | .home_header { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 200px; |
| | | padding: 20px; |
| | | color: #fff; |
| | | background: linear-gradient(180deg, #076ae5 0%, rgba(32, 127, 247, 0) 100%); |
| | | } |
| | | } |
| | | </style> |