From a263dd50386b73f9992919a932f98b4bd5585052 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期一, 19 九月 2022 10:04:01 +0800
Subject: [PATCH] 1.app首页开发完成
---
pages/xtsy/index.html | 129 ++++++++++++++++++++++++++++++++++--------
1 files changed, 104 insertions(+), 25 deletions(-)
diff --git a/pages/xtsy/index.html b/pages/xtsy/index.html
index 576aa1a..aec973f 100644
--- a/pages/xtsy/index.html
+++ b/pages/xtsy/index.html
@@ -15,9 +15,9 @@
<script src="../../js/vue.min.js"></script>
<script src="../../js/vant.min.js"></script>
- <!-- <script type="text/javascript" src="../../js/jquery-1.6.4.min.js"></script> -->
- <!-- <script type="text/javascript" src="../../js/axios.min.js"></script> -->
- <!-- <script type="text/javascript" src="../../js/http.js"></script> -->
+ <script type="text/javascript" src="../../js/jquery-1.6.4.min.js"></script>
+ <script type="text/javascript" src="../../js/axios.min.js"></script>
+ <script type="text/javascript" src="../../js/http.js"></script>
<link rel="stylesheet" href="../css/global.css" type="text/css" charset="utf-8" />
@@ -27,30 +27,47 @@
<div id="app">
<div class="body">
- <div>
- <van-nav-bar title="鏍囬" style="height:50px ;" right-text="鎸夐挳" left-arrow
- @click-right="onClickRight" />
- </div>
+
+ <van-nav-bar title="宸ヤ綔鍙�" @click-right="onClickRight">
+ <template #right>
+ <van-popover placement="bottom-end" :offset="[13,8]" v-model="showPopover"
+ trigger="click" :actions="actions" @select="onSelect">
+ <template #reference>
+ <van-icon name="bars" size='20' color='#fff' />
+ </template>
+ </van-popover>
+ </template>
+ </van-nav-bar>
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
- <img v-lazy="image" :src='image' style="background-size: 100% 100%;" />
+ <img v-lazy="image" :src='image' style="background-size: 100% 100%;width: 100%;" />
</van-swipe-item>
</van-swipe>
- <van-grid :gutter="10" square :column-num="3">
- <van-grid-item v-for="item in 9" @click='vanGridItem(item)' :key="item" icon="photo-o" text="鏂囧瓧" />
+ <van-grid :gutter="20" :border='false' square :column-num="3" style="margin: 30px auto 0; width: 90%;">
+ <van-grid-item v-for="item in firstMenu" @click='vanGridItem(item)' :key="item" :text="item.name">
+ <img :src="item.imgurl" alt=""
+ style="width: 56px;height:56px;margin-top: 10px;border-radius: 10px;">
+ <div style="margin-top: 5px;font-size: 14px;color: #929399;">{{item.name}}</div>
+ </van-grid-item>
</van-grid>
<van-action-sheet lazy-render :closeable='false' close-on-click-action close-on-click-overlay
- safe-area-inset-bottom v-model="sheetShow" title="鏍囬">
- <van-grid :gutter="10" square :column-num="3">
- <van-grid-item v-for="item in 9" @click='vanGridItem(item)' :key="item" icon="photo-o"
- text="鏂囧瓧" />
+ safe-area-inset-bottom v-model="sheetShow" :title="firstMenuName">
+ <van-grid :border='false' :gutter="5" square :column-num="3" style="width: 80%; margin: auto;">
+ <van-grid-item v-for="item in secondMenu" @click='vanGridSecondItem(item)' :key="item"
+ icon="photo-o">
+ <img :src="item.imgurl" alt=""
+ style="width: 48px;height:48px;margin-top: 10px;border-radius: 10px;">
+ <div style="margin-top: 5px;font-size: 12px;color: #929399;">{{item.name}}</div>
+ </van-grid-item>
</van-grid>
</van-action-sheet>
</div>
+
+ <van-overlay :show="overlayShow" @click="overlayShow=false" />
</div>
@@ -64,21 +81,78 @@
'../../static/images/swiper01.png',
'../../static/images/swiper02.png',
],
- sheetShow: false
+ sheetShow: false,
+ overlayShow: false,
+ showPopover: false,
+ actions: [{
+ icon: 'description',
+ text: '鎿嶄綔鎸囧'
+ }, {
+ icon: 'award-o',
+ text: '鎴愬搧杩芥函'
+ }, {
+ icon: 'revoke',
+ text: '閫�鍑虹櫥褰�'
+ }],
+ firstMenu: [], //涓�绾ц彍鍗�
+ firstMenuName: '',
+ secondMenu: [], //浜岀骇鑿滃崟
}
},
created() {
},
+ mounted() {
+ this.getfirstMenu()
+ },
methods: {
- vanGridItem(item) {
- console.log(item)
- this.sheetShow = true
+ // 鑾峰彇涓�绾ц彍鍗�
+ async getfirstMenu() {
+ const data = {
+ usertype: 'APP',
+ usercode: localStorage.getItem('usercode')
+ }
+ const {
+ data: res
+ } = await get('Login/LoginMenu', data)
+ this.firstMenu = res
},
+ // 涓�绾ц彍鍗曠偣鍑�
+ vanGridItem(item) {
+ this.sheetShow = true
+ this.firstMenuName = item.name
+ this.secondMenu = item.children
+ },
+ // 浜岀骇鑿滃崟鐐瑰嚮
+ vanGridSecondItem(item) {
+ let url = ''
+ switch (item.code) {
+ // 璁惧绠＄悊
+ case '2040':
+ url = '../sbgl/rcdj.html'
+ break;
+ case '2041':
+ url = '../sbgl/dqby.html'
+ break;
+ case '2042':
+ url = '../sbgl/sbwx.html'
+ break;
+ case '2043':
+ url = '../sbgl/wxyz.html'
+ break;
+ }
+ window.location = url
+ },
+ // 椤堕儴鍙冲浘鏍囩偣鍑�
onClickRight() {
-
- }
+ this.overlayShow = true
+ },
+ // 椤堕儴鍙冲浘鏍囦笅鎷夐�夋嫨
+ onSelect(action) {
+ vant.Toast(action.text);
+ this.overlayShow = false
+ },
}
})
</script>
@@ -88,16 +162,21 @@
}
.body {
- width: 96%;
height: 600px;
background-color: grey;
margin-top: 0px;
- margin-left: 2%;
background-color: #fff;
position: relative;
- /* display: flex;
- justify-content: center;
- align-items: flex-start; */
+ }
+
+ .van-nav-bar__content {
+ background-color: #2651d8;
+ height: 44px;
+ }
+
+ .van-nav-bar__title {
+ color: #fff;
+ letter-spacing: 2px;
}
</style>
</html>
--
Gitblit v1.9.3