|
@@ -1,30 +1,94 @@
|
|
|
<script setup lang="ts"></script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <navigator url="/subPages/pages/reportProblems/index" class="shadow">事项咨询</navigator>
|
|
|
- <navigator url="/subPages/pages/reportServer/index" class="shadow">服务事项</navigator>
|
|
|
- <navigator url="/subPages/pages/questions/index" class="shadow">问答库</navigator>
|
|
|
- <!-- <navigator url="/subPages/pages/inspectionResults/index" class="shadow">店铺/企业检查结果</navigator>
|
|
|
- <navigator url="/subPages/pages/my/index" class="shadow">我的管理</navigator> -->
|
|
|
+ <view class="box">
|
|
|
+ <img class="box_bg_top" src="@/assets/bg_top.png" alt="" srcset="">
|
|
|
+ <view class="container">
|
|
|
+ <navigator url="/subPages/pages/reportProblems/index" class="shadow">
|
|
|
+ <img class="box_img" src="@/assets/1.png" alt="" srcset="">
|
|
|
+ <div class="box_title">事项咨询</div>
|
|
|
+ </navigator>
|
|
|
+ <navigator url="/subPages/pages/reportServer/index" class="shadow">
|
|
|
+ <img class="box_img" src="@/assets/2.png" alt="" srcset="">
|
|
|
+ <div class="box_title">服务事项</div>
|
|
|
+ </navigator>
|
|
|
+ <navigator url="/subPages/pages/questions/index" class="shadow">
|
|
|
+ <img class="box_img" src="@/assets/3.png" alt="" srcset="">
|
|
|
+ <div class="box_title">问答库</div>
|
|
|
+ </navigator>
|
|
|
+ <!-- <navigator url="/subPages/pages/inspectionResults/index" class="shadow">店铺/企业检查结果</navigator>
|
|
|
+ <navigator url="/subPages/pages/my/index" class="shadow">我的管理</navigator> -->
|
|
|
+ </view>
|
|
|
+ <img class="box_bg_bottom" src="@/assets/bg_bottom.png" alt="" srcset="">
|
|
|
</view>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.box{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: #f6f6f6;
|
|
|
+ &_bg_top{
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ &_bg_bottom{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ &_title{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &_img{
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.container {
|
|
|
- padding: 20px;
|
|
|
- margin-top: 40px;
|
|
|
+ padding: 5%;
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
|
gap: 20px;
|
|
|
- uni-navigator {
|
|
|
- border: 1px solid black;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 40px;
|
|
|
- height: 100px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+ position: absolute;
|
|
|
+ top: 130px;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
+
|
|
|
+.container uni-navigator {
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 5%;
|
|
|
+ height: 0;
|
|
|
+ padding-bottom: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.container uni-navigator::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ padding-top: 90%;
|
|
|
+}
|
|
|
+
|
|
|
+.container uni-navigator-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|