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

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>