Fix：2653 【非遗文化】【推荐】处的非遗文化名称及简介区域新增底色

pkg_product/views/heritage/index.vue

@@ -67,13 +67,15 @@
         <view class="recommend-item flex-item">
           <view class="v12-font-24 v12-white-text"></view>
           <view>
-            <view @click="toDetails(item.id)" class="item-name one-t v12-px-2 v12-white-border v12-white-text v12-font-32 v12-radius-100 v12-mb-3">
-              <text class="title-link__text one-t">
-                {{ item.name }}
-              </text>
-              <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
+            <view style="padding: 0 20rpx;">
+              <view @click="toDetails(item.id)" class="item-name one-t v12-px-2 v12-white-border v12-white-text v12-font-32 v12-radius-100 v12-mb-2">
+                <text class="title-link__text one-t">
+                  {{ item.name }}
+                </text>
+                <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
+              </view>
             </view>
-            <view class="v12-white-text v12-font-26 one-t">{{ item.intro }}</view>
+            <view class="v12-white-text v12-font-26 one-t intro-bg">{{ item.intro }}</view>
           </view>
         </view>
       </view>
@@ -140,6 +142,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.intro-bg{
+  padding: 10rpx 20rpx;
+  background: rgba(0,0,0,0.5);
+}
 .row-column-gap{
   grid-column-gap: 20rpx;
   grid-row-gap: 20rpx;
@@ -172,7 +178,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 20rpx;
+  // padding: 20rpx;
 }
 .recommend-item{
   width: 342rpx;
@@ -181,6 +187,7 @@ export default {
   border-radius: 20rpx;
   position: relative;
   box-sizing: border-box;
+  overflow: hidden;
   .image{
     position: absolute;
     left: 0;