Style(非遗文化&地标好物): 图片、图标、背景图调整

pages/home/components/projects.vue

@@ -17,7 +17,13 @@
             'no-actived-3': actived === 3 && item.value === 2,
             'no-actived-4': actived === 2 && item.value === 3,
           }"
-        >{{ item.name }}</view>
+        >
+          <image class="tab-icon" :src="webUrl + '/orderIcon/' + item.icon" mode="aspectFit|aspectFill|widthFix"></image>
+          {{ item.name }}
+          <!-- <view>
+            <view>{{ item.name }}</view>
+          </view> -->
+      </view>
       </view>
     </view>
     <view 
@@ -53,11 +59,12 @@ export default {
   },
   data() {
     return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       actived: 1,
       tabs: [
-        {name: '企业推荐', value: 1},
-        {name: '政策', value: 2},
-        {name: '服务', value: 3},
+        {name: '企业推荐', value: 1, icon: 'qytj.png'},
+        {name: '政策', value: 2, icon: 'zc.png'},
+        {name: '服务', value: 3, icon: 'fw.png'},
       ]
     }
   },
@@ -70,6 +77,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.tab-icon{
+  height: 30rpx;
+  width: 30rpx;
+  margin-right: 10rpx;
+}
 .fit-box-inner{
   background: #f0f0f0;
   width: initial;
@@ -106,6 +118,9 @@ export default {
     background: #f0f0f0;
     width: inherit;
     height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center
   }
 }
 .no-actived-1{

pages/home/components/serviec.vue

@@ -4,7 +4,7 @@
       <map
         :longitude="info.longitude"
         :latitude="info.latitude"
-        style="width: 100%;height: 400rpx; border-radius: 20rpx;"
+        style="width: 100%;height: 100%; border-radius: 20rpx;"
       />
     </view>
     <view class="v12-mt-3 info-wrap">
@@ -78,8 +78,8 @@ export default {
 }
 .info-wrap{
   display: flex;
-  justify-content: space-around;
-  padding: 40rpx 0 0;
+  justify-content: space-between;
+  padding: 40rpx 20rpx 0;
 }
 .service{
   position: relative;

pkg_product/views/heritage/details.vue

@@ -4,7 +4,16 @@
       <video class="top-img" :src="details.video"></video>
     </view>
     <view class="title-img">
-      <view></view>
+      <view class="img-wrap">
+        <view class="v12-align-center">
+          <image class="left-img" :src="webUrl + '/orderIcon/左.png'"></image>
+          <view class="v12-align-center text-img-wrap">
+            <image :src="webUrl + '/orderIcon/中.png'"></image>
+            <view class="v12-font-36 d-title">{{ details.name }}</view>
+          </view>
+          <image class="left-img" :src="webUrl + '/orderIcon/右.png'"></image>
+        </view>
+      </view>
       <view class="v12-font-26 v12-font-bold v12-dark-text">{{ details.intro }}</view>
     </view>
     <view class="tabs v12-my-3 v12-font-32 v12-font-bold">
@@ -48,6 +57,7 @@ import { getIchContent } from '@/api/heritage'
 export default {
   data() {
     return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       actived: 1,
       id: '',
       details: {}
@@ -76,6 +86,31 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.text-img-wrap{
+  width: fit-content;
+  position: relative;
+  image{
+    width: 100%;
+    height: 70rpx;
+    position: absolute;
+  }
+}
+.img-wrap{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.left-img{
+   height: 70rpx;
+   width: 60rpx;
+}
+.d-title{
+  text-align: center; 
+  font-weight: bold;
+  z-index: 1;
+  color: #fff;
+  line-height: 70rpx;
+}
 .p-name{
   max-width: 200rpx;
   text-align: center;
@@ -141,12 +176,12 @@ export default {
   border-radius: 20rpx;
 }
 .title-img{
-  height: 146rpx;
+  /* height: 146rpx; */
   width: 100%;
   border-radius: 146rpx;
   margin-top: 24rpx;
-  background: rgba(255,255,255,0.39);
-  padding: 60rpx;
+  background: #e0bb8c;
+  padding: 10rpx 60rpx;
   box-sizing: border-box;
 }
 </style>