Feat： 寻趣味接口对接（缺分享接口，店住名称字段）

pages/town/index.vue

@@ -1,7 +1,18 @@
 <template>
   <view class="town">
+    <hx-navbar :back="true" :fixed="true" color="#fff" :statusBar="true" transparent="hidden" barPlaceholder="hidden" />
     <view class="top-img">
-      <image :src="townInfo.cover" mode="scaleToFill" class="img"></image>
+      <image v-if="townInfo.coverType === 1" :src="townInfo.cover" mode="scaleToFill" class="img"></image>
+      <video 
+        v-if="townInfo.coverType === 2"
+        class="img" 
+        :src="townInfo.cover"  
+        autoplay
+        :play-btn-position="center" 
+        :show-fullscreen-btn="false"
+        :show-play-btn="false"
+        :show-center-play-btn="flase"
+        > </video>
     </view>
     <view class="top-intro">
       <view class="intro-title v12-pa-3">
@@ -10,9 +21,12 @@
           4A
         </text>
       </view>
+      <view class="shareBtn"><u-icon name="share-square" color="#C52733"></u-icon>分享给好友</view>
       <u-line dashed></u-line>
-      <view class="v12-pa-3 intro-content">
-        {{ townInfo.intro }}
+      <view v-if="townInfo.intro" class="v12-pa-3 intro-content">
+        <u-read-more :toggle="true" showHeight="200">
+          {{ townInfo.intro }}
+        </u-read-more>
       </view>
     </view>
     <view class="tabs-wrap">
@@ -93,6 +107,21 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.shareBtn{
+  width: fit-content;
+  padding: 5rpx 15rpx;
+  background: #edbfc2;
+  box-shadow: 0rpx 4rpx 4rpx rgba(0,0,0,0.16);
+  border-radius: 24rpx 0rpx 0rpx 24rpx;
+  color: #C52733;
+  font-weight: bold;
+  font-size: 28rpx;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+}
 .town{
   min-height: 100vh;
   background: #f0f0f0;
@@ -113,7 +142,7 @@ export default {
   font-size: 36rpx;
 }
 .intro-content{
-  letter-spacing: 100px;
+  letter-spacing: 2.5px;
   line-height: 40rpx;
   font-size: 28rpx;
   color: #666;
@@ -134,15 +163,32 @@ export default {
   border-radius: 30rpx;
   margin-top: -30rpx;
   position: relative;
-  z-index: 2;
+  z-index: 11;
 }
 .top-img{
   width: 100%;
+  background: #fff;
   height: 560rpx;
-  background: rgba(180,18,18,0.39);
+  position: relative;
   .img{
     height: inherit;
     width: 100%;
   }
+  .img1{
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 30rpx;
+  }
+  .bg{
+    height: 100%;
+    width: 50%;
+    background: #fff;
+    position: absolute;
+    top: -30rpx;
+    right: 0;
+    z-index: 9;
+  }
 }
 </style>