地图广告

api/feedback.js

@@ -6,6 +6,9 @@ export const getDictTree_Api = (dictValue) => http.get('/dev/dict/listByDictValu
 export const getPicCaptcha_Api = () => http.get('/h5/auth/b/getPicCaptcha' )
 // 提交反馈
 export const addMapuserfeedback_Api= (data) => http.post('/h5/biz/mapuserfeedback/add', data )
+
+export const getConfigByKey = (data) =>
+  http.get("/dev/config/getByConfigKey", { params: data });
  
 
 

api/map.js

@@ -15,6 +15,18 @@ export const getMaptypeList_Api = (params) => http.get('/h5/biz/maptype/list' ,
 // 获取地图点位服务
 export const getMapMatterList_Api = (params) => http.get('/h5/biz/map/matterList' , {params:params})
 // 获取地图点位服务
-export const getMapMatterListH6_Api = (params) => http.get('/h6/biz/map/matterList' , {params:params})
+export const getMapMatterListH6_Api = (params) =>
+    http.get("/h6/biz/map/matterList", { params: params });
+
+// 获取地图广告服务
+export const getMapAdList_Api = (params) =>
+    http.get("/h5/biz/ad/list", { params: params });
+
+//获取广告详情
+export const getMapAdDetail_Api = (params) =>
+    http.get("/h5/biz/ad/detail", { params: params });
+//根据事项ud获取广告绑定的事项详情
+export const getMapMatterDetail_Api = (params) =>
+  http.get("/h6/biz/map/h6MatterDetail", { params: params });
 
 

components/mapAd/mapAd.vue

@@ -0,0 +1,79 @@
+<template>
+  <uni-popup
+    class="picker-popup"
+    ref="mapAdPopupRef"
+    type="bottom"
+    border-radius="10px 10px 0 0"
+  >
+    <div class="picker-content">
+      <div class="city-picker-btn">
+        <text @click.stop="cancel()">取消</text>
+        <text @click.stop="confirm()">确定</text>
+      </div>
+      <picker-view
+        indicator-class="indicator-class"
+        :value="value || []"
+        class="picker-view"
+        @change="bindChange"
+      >
+        <picker-view-column>
+          <view class="item" v-for="(item, index) in mapAdList" :key="index">{{
+            item.adName
+          }}</view>
+        </picker-view-column>
+      </picker-view>
+    </div>
+  </uni-popup>
+</template>
+
+<script>
+import { getMapAdList_Api } from "@/api/map.js";
+export default {
+  name: "mapAd",
+  props: {
+    mapAdId: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      value: [],
+      mapAdList: [],
+    };
+  },
+  watch: {},
+  created() {
+    this.init();
+  },
+  mounted() {},
+  methods: {
+    init() {
+      const parms = { typeStatus: "ENABLE" };
+      getMapAdList_Api(parms).then((res) => {
+        this.mapAdList = res || [];
+      });
+    },
+    open() {
+      this.$refs.mapAdPopupRef.open();
+    },
+    bindChange(val) {
+      const { value } = val.detail;
+      this.value = value || [0];
+    },
+    confirm() {
+      const in_ = this.value[0] || 0;
+      const item = this.mapAdList[in_];
+      this.$emit("update:mapAdId", item.mapAdId);
+      this.$emit("mapAdSelect", item);
+      this.cancel();
+    },
+    cancel() {
+      this.$refs.mapAdPopupRef.close();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

config/index.js

@@ -1,7 +1,7 @@
 export default {
 	// baseURL: "https://ditu.qqzzhou.com/oa",
 	baseURL: "https://zwdt.wuhan-cloud.com/oa", 
-	// baseURL: "http://192.168.0.78:8282", 
+	// baseURL: "http://192.168.0.75:8282", 
 
 
 

manifest.json

@@ -1,87 +1,88 @@
 {
-    "name" : "H5",
-    "appid" : "__UNI__E384BDC",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
-    "transformPx" : false,
-    /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
-        },
-        /* 模块配置 */
-        "modules" : {},
-        /* 应用发布信息 */
-        "distribute" : {
-            /* android打包配置 */
-            "android" : {
-                "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-                ]
-            },
-            /* ios打包配置 */
-            "ios" : {},
-            /* SDK配置 */
-            "sdkConfigs" : {}
-        }
-    },
-    /* 快应用特有相关 */
-    "quickapp" : {},
-    /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "",
-        "setting" : {
-            "urlCheck" : false
-        },
-        "usingComponents" : true
-    },
-    "mp-alipay" : {
-        "usingComponents" : true
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
-    },
-    "mp-toutiao" : {
-        "usingComponents" : true
-    },
-    "uniStatistics" : {
-        "enable" : false
-    },
-    "vueVersion" : "2",
-    "h5" : {
-        "title" : "政务地图",
-        "template" : "index.html",
-        "sdkConfigs" : {
-            "maps" : {}
-        },
-        "router" : {
-            "base" : "/h5/"
-        },
-        "optimization" : {
-            "treeShaking" : {
-                "enable" : false
-            }
-        }
-    }
-}
+	"sassImplementationName": "node-sass",
+	"name": "H5",
+	"appid": "__UNI__E384BDC",
+	"description": "",
+	"versionName": "1.0.0",
+	"versionCode": "100",
+	"transformPx": false,
+	/* 5+App特有相关 */
+	"app-plus": {
+		"usingComponents": true,
+		"nvueStyleCompiler": "uni-app",
+		"compilerVersion": 3,
+		"splashscreen": {
+			"alwaysShowBeforeRender": true,
+			"waiting": true,
+			"autoclose": true,
+			"delay": 0
+		},
+		/* 模块配置 */
+		"modules": {},
+		/* 应用发布信息 */
+		"distribute": {
+			/* android打包配置 */
+			"android": {
+				"permissions": [
+					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
+					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+					"<uses-feature android:name=\"android.hardware.camera\"/>",
+					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+				]
+			},
+			/* ios打包配置 */
+			"ios": {},
+			/* SDK配置 */
+			"sdkConfigs": {}
+		}
+	},
+	/* 快应用特有相关 */
+	"quickapp": {},
+	/* 小程序特有相关 */
+	"mp-weixin": {
+		"appid": "",
+		"setting": {
+			"urlCheck": false
+		},
+		"usingComponents": true
+	},
+	"mp-alipay": {
+		"usingComponents": true
+	},
+	"mp-baidu": {
+		"usingComponents": true
+	},
+	"mp-toutiao": {
+		"usingComponents": true
+	},
+	"uniStatistics": {
+		"enable": false
+	},
+	"vueVersion": "2",
+	"h5": {
+		"title": "政务地图",
+		"template": "index.html",
+		"sdkConfigs": {
+			"maps": {}
+		},
+		"router": {
+			"base": "/h5/"
+		},
+		"optimization": {
+			"treeShaking": {
+				"enable": false
+			}
+		}
+	}
+}

package-lock.json

@@ -1,26 +1,63 @@
 {
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "@amap/amap-jsapi-loader": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
-      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
-    },
-    "gcoord": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmmirror.com/gcoord/-/gcoord-1.0.7.tgz",
-      "integrity": "sha512-UCN2iSm69jBOYz2ma2eg5I5imp65Cj70rcTTfMNSNMvZpR1U6oGjmVh080aCvC/6lN1ClkuOoBeaLuebw9AZJg=="
-    },
-    "uview-ui": {
-      "version": "2.0.38",
-      "resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.38.tgz",
-      "integrity": "sha512-6egHDf9lXHKpG3hEjRE0vMx4+VWwKk/ReTf5x18KrIKqdvdPRqO3+B8Unh7vYYwrIxzAWIlmhZ9RJpKI/4UqPQ=="
-    },
-    "whichtype": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmmirror.com/whichtype/-/whichtype-1.7.0.tgz",
-      "integrity": "sha512-9NuMEddDLvMqjnb6uGza4rNLyR+1yFOvn6HsdgIdIqabu1DDyOn7Z2Ypplww29o+JJpggcE57pB5FCPwWspyDw=="
-    }
-  }
+	"name": "H5",
+	"lockfileVersion": 2,
+	"requires": true,
+	"packages": {
+		"": {
+			"dependencies": {
+				"@amap/amap-jsapi-loader": "^1.0.1",
+				"gcoord": "1.0.7",
+				"uview-ui": "2.0.38",
+				"whichtype": "^1.0.1"
+			}
+		},
+		"node_modules/@amap/amap-jsapi-loader": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+			"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+		},
+		"node_modules/gcoord": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmmirror.com/gcoord/-/gcoord-1.0.7.tgz",
+			"integrity": "sha512-UCN2iSm69jBOYz2ma2eg5I5imp65Cj70rcTTfMNSNMvZpR1U6oGjmVh080aCvC/6lN1ClkuOoBeaLuebw9AZJg==",
+			"engines": {
+				"node": ">=16.11.0"
+			}
+		},
+		"node_modules/uview-ui": {
+			"version": "2.0.38",
+			"resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.38.tgz",
+			"integrity": "sha512-6egHDf9lXHKpG3hEjRE0vMx4+VWwKk/ReTf5x18KrIKqdvdPRqO3+B8Unh7vYYwrIxzAWIlmhZ9RJpKI/4UqPQ==",
+			"engines": {
+				"HBuilderX": "^3.1.0"
+			}
+		},
+		"node_modules/whichtype": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmmirror.com/whichtype/-/whichtype-1.7.0.tgz",
+			"integrity": "sha512-9NuMEddDLvMqjnb6uGza4rNLyR+1yFOvn6HsdgIdIqabu1DDyOn7Z2Ypplww29o+JJpggcE57pB5FCPwWspyDw=="
+		}
+	},
+	"dependencies": {
+		"@amap/amap-jsapi-loader": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+			"integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+		},
+		"gcoord": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmmirror.com/gcoord/-/gcoord-1.0.7.tgz",
+			"integrity": "sha512-UCN2iSm69jBOYz2ma2eg5I5imp65Cj70rcTTfMNSNMvZpR1U6oGjmVh080aCvC/6lN1ClkuOoBeaLuebw9AZJg=="
+		},
+		"uview-ui": {
+			"version": "2.0.38",
+			"resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.38.tgz",
+			"integrity": "sha512-6egHDf9lXHKpG3hEjRE0vMx4+VWwKk/ReTf5x18KrIKqdvdPRqO3+B8Unh7vYYwrIxzAWIlmhZ9RJpKI/4UqPQ=="
+		},
+		"whichtype": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmmirror.com/whichtype/-/whichtype-1.7.0.tgz",
+			"integrity": "sha512-9NuMEddDLvMqjnb6uGza4rNLyR+1yFOvn6HsdgIdIqabu1DDyOn7Z2Ypplww29o+JJpggcE57pB5FCPwWspyDw=="
+		}
+	}
 }

package.json

@@ -0,0 +1,8 @@
+{
+	"dependencies": {
+		"@amap/amap-jsapi-loader": "^1.0.1",
+		"gcoord": "1.0.7",
+		"uview-ui": "2.0.38",
+		"whichtype": "^1.0.1"
+	}
+}

pages.json

@@ -1,42 +1,45 @@
 {
-	"easycom": {
-		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
-	},
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-
-		{
-			"path": "pages/map/index",
-			"style": {
-				"navigationBarTitleText": "政务地图"
-			}
-		},
-		{
-			"path": "pages/map/matterDetails",
-			"style": {
-				"navigationBarTitleText": "政务地图"
-			}
-		},
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "政务地图"
-			}
-		},
-		{
-			"path": "pages/feedback/feedback",
-			"style": {
-				"navigationBarTitleText": "反馈"
-			}
-		}
-
-
-	],
-	"globalStyle": {
-		"navigationStyle": "custom",
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "政务地图",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"uniIdRouter": {}
-}
+  "easycom": {
+    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+  },
+  "pages": [
+    {
+      "path": "pages/map/index",
+      "style": {
+        "navigationBarTitleText": "政务地图"
+      }
+    },
+    {
+      "path": "pages/map/matterDetails",
+      "style": {
+        "navigationBarTitleText": "政务地图"
+      }
+    },
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "政务地图"
+      }
+    },
+    {
+      "path": "pages/feedback/feedback",
+      "style": {
+        "navigationBarTitleText": "反馈"
+      }
+    },
+    {
+      "path": "pages/map/model/adDetail",
+      "style": {
+        "navigationBarTitleText": "广告详情"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationStyle": "custom",
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "政务地图",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  },
+  "uniIdRouter": {}
+}

pages/map/model/adDetail.vue

@@ -0,0 +1,83 @@
+<template>
+  <view class="adDetails">
+    <view class="adTitle">{{ adDetail.adName }}</view>
+    <view class="adTime">{{ adDetail.createTime }}</view>
+    <rich-text :nodes="adDetail.description" class="adContent"></rich-text>
+    <view v-if="adDetail.jumpType==1&&adDetail.videoUrl" class="adVideo">
+      <video :src="adDetail.videoUrl" controls class="video-player"></video>
+    </view>
+  </view>
+</template>
+<script>
+import { getMapAdDetail_Api } from "@/api/map.js";
+export default {
+  data() {
+    return {
+      adDetail: {},
+      params: {
+        adId: "",
+      },
+    };
+  },
+  watch: {
+    "adDetail.description": { //富文本图片预览
+      handler(newV, oldV) {
+        this.$nextTick(() => {
+          let imgArr = document.getElementsByTagName("img");
+          console.log(111, imgArr);
+          if (imgArr) {
+            for (let i = 0; i < imgArr.length; i++) {
+              imgArr[i].addEventListener("click", (e) => {
+                console.log(imgArr[i]);
+                uni.previewImage({
+                  urls: [imgArr[i].src],
+                })
+              });
+            }
+          }
+        });
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.params.adId = this.$route.query.mapAdId;
+    this.getDetails();
+  },
+  methods: {
+    getDetails() {
+      getMapAdDetail_Api(this.params).then((res) => {
+        this.adDetail = res;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.adDetails {
+  padding: 20rpx;
+  .adTitle {
+    font-size: 32rpx;
+    font-weight: bold;
+    padding: 10rpx 20rpx;
+  }
+  .adTime {
+    font-size: 24rpx;
+    color: #999;
+    padding: 10rpx 20rpx;
+  }
+  .adContent {
+    font-size: 28rpx;
+    line-height: 44rpx;
+    margin-top: 20rpx;
+    display: inline-block;
+  }
+  .adVideo {
+    margin-top: 20rpx;
+    .video-player {
+      width: 100%;
+      height: 400rpx;
+    }
+  }
+}
+</style>

pages/map/model/hint.vue

@@ -1,109 +1,115 @@
 <template>
-	<uni-popup ref="hintRef" :isMaskClick='true' type="center" border-radius="10px 10px 0 0"
-		maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
-		<view class="hint-box">
-			<view class="hint-title">服务声明</view>
-			<view class="hint-val">
-				尊敬的市民朋友，您好！【武汉公安政务服务地图】正在试运行中，如有任何疑问和建议，欢迎致电武汉公安政务服务专线027-85395115。
-			</view>
-			<view class="hint-btns" @click.stop="onClose()">
-				<view class="hint-btn">关闭</view>
-			</view>
-		</view>
-	</uni-popup>
+  <uni-popup
+    ref="hintRef"
+    :isMaskClick="true"
+    type="center"
+    border-radius="10px 10px 0 0"
+    maskBackgroundColor="rgba(0, 0, 0, 0.1)"
+  >
+    <view class="hint-box">
+      <view class="hint-title">服务声明</view>
+      <view class="hint-val">
+        {{ warningText }}
+      </view>
+      <view class="hint-btns" @click.stop="onClose()">
+        <view class="hint-btn">关闭</view>
+      </view>
+    </view>
+  </uni-popup>
 </template>
 
 <script>
-	import { PhoneCall } from "@/utils/tool.js";
-	export default {
-		data() {
-			return {
-				hintList: []
-			}
-		},
-		created() {
-
-		},
-		mounted() {
-			this.cheackShow();
-		},
-		methods: {
-			cheackShow() {
-				try {
-					const a = uni.getStorageSync('showHint');
-					if (!a) {
-						this.open()
-					}
-				} catch (e) {
-					this.open()
-				}
-			},
-			open() {
-				this.$refs.hintRef.open()
-				try {
-					uni.setStorageSync('showHint', true);
-				} catch (e) {
-					// error
-				}
-			},
-			onPhoneCall(phone) {
-				PhoneCall(phone).then(res => {
-					this.onClose()
-				})
-			},
-			onClose() {
-				this.$refs.hintRef.close()
-				this.hintList = [];
-			}
-		}
-	}
+import { PhoneCall } from "@/utils/tool.js";
+import { getConfigByKey } from "@/api/feedback.js";
+export default {
+  data() {
+    return {
+      hintList: [],
+      warningText: "",
+    };
+  },
+  created() {},
+  mounted() {
+    this.cheackShow();
+  },
+  methods: {
+    async cheackShow() {
+      console.log("-------检查提示列表-------");
+      try {
+        const res = await getConfigByKey({ configKey: "mapIndexWarning" });
+        this.warningText = res.configValue;
+        const a = uni.getStorageSync("showHint");
+        if (!a) {
+          this.open();
+        }
+      } catch (e) {
+        this.open();
+      }
+    },
+    open() {
+      this.$refs.hintRef.open();
+      try {
+        uni.setStorageSync("showHint", true);
+      } catch (e) {
+        // error
+      }
+    },
+    onPhoneCall(phone) {
+      PhoneCall(phone).then((res) => {
+        this.onClose();
+      });
+    },
+    onClose() {
+      this.$refs.hintRef.close();
+      this.hintList = [];
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.uni-popup {
-		z-index: 1002;
-
-		.hint-box {
-			width: 80vw;
-			min-height: 30vh;
-			height: auto;
-			max-height: 70vh;
-			background-color: #fff;
-			border-radius: 20rpx;
-			display: flex;
-			flex-direction: column;
-			// justify-content: center;
-			align-items: center;
-			justify-content: space-between;
-
-			.hint-title {
-				font-size: 36rpx;
-				padding: 20rpx 0;
-			}
+.uni-popup {
+  z-index: 1002;
 
-			.hint-val {
-				height: 1px;
-				flex: 1;
-				padding: 20rpx 30rpx;
-				color: #6F6F6F;
+  .hint-box {
+    width: 80vw;
+    min-height: 30vh;
+    height: auto;
+    max-height: 70vh;
+    background-color: #fff;
+    border-radius: 20rpx;
+    display: flex;
+    flex-direction: column;
+    // justify-content: center;
+    align-items: center;
+    justify-content: space-between;
 
-			}
+    .hint-title {
+      font-size: 36rpx;
+      padding: 20rpx 0;
+    }
 
-			.hint-btns {
-				padding: 20rpx 0;
+    .hint-val {
+      height: 1px;
+      flex: 1;
+      padding: 20rpx 30rpx;
+      color: #6f6f6f;
+    }
 
-				.hint-btn {
-					width: 260rpx;
-					height: 80rpx;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					color: #fff;
-					border-radius: 10rpx;
-					background-color: #3291F8;
-				}
+    .hint-btns {
+      padding: 20rpx 0;
 
-			}
-		}
-	}
+      .hint-btn {
+        width: 260rpx;
+        height: 80rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        border-radius: 10rpx;
+        background-color: #3291f8;
+      }
+    }
+  }
+}
 </style>