营销：适配商城装修组件【标题栏】

sheep/components/s-block-item/s-block-item.vue

@@ -20,7 +20,7 @@
     <!-- 图文组件：图片轮播 -->
     <s-image-banner v-if="type === 'Carousel'" :data="data" :styles="styles" />
     <!-- 基础组件：标题栏 -->
-    <s-title-block v-if="type === 'titleBlock'" :data="data" :styles="styles" />
+    <s-title-block v-if="type === 'TitleBar'" :data="data" :styles="styles" />
     <!-- 图文组件：广告魔方 -->
     <s-image-cube v-if="type === 'MagicCube'" :data="data" :styles="styles" />
     <!-- 图文组件：视频播放 -->

sheep/components/s-title-block/s-title-block.vue

@@ -2,36 +2,29 @@
 <template>
   <view
     class="ss-title-wrap ss-flex ss-col-center"
-    :class="[state.typeMap[data.location]]"
+    :class="[state.typeMap[data.textAlign]]"
     :style="[elStyles]"
   >
     <view class="title-content">
-      <view v-if="data.title.text" class="title-text" :style="[titleStyles]">{{
-        data.title.text
-      }}</view>
-      <view v-if="data.subtitle.text" :style="[subtitleStyles]" class="sub-title-text">
-        {{ data.subtitle.text }}
-      </view>
+      <!-- 主标题 -->
+      <view v-if="data.title" class="title-text" :style="[titleStyles]">{{ data.title }}</view>
+      <!-- 副标题 -->
+      <view v-if="data.description" :style="[descStyles]" class="sub-title-text">{{ data.description }}</view>
     </view>
-    <view v-if="data.more.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)">
-      <view class="more-text">查看更多</view>
-      <text class="_icon-forward"></text>
+    <!-- 查看更多 -->
+    <view v-if="data.more?.show" class="more-box ss-flex ss-col-center" @tap="sheep.$router.go(data.more.url)"
+          :style="{color: data.descriptionColor}">
+      <view class="more-text" v-if="data.more.type !== 'icon'">{{ data.more.text }} </view>
+      <text class="_icon-forward" v-if="data.more.type !== 'text'"></text>
     </view>
   </view>
 </template>
 
 <script setup>
   /**
-   *
    * 标题栏
-   *
-   * @property {String} title 				- 标题
-   * @property {String} subTitle 				- 副标题
-   * @property {Number} height 				- 高度
-   * @property {String} Type = [left | right | center | between]					- 样式
-   *
    */
-  import { computed, reactive } from 'vue';
+  import { reactive } from 'vue';
   import sheep from '@/sheep';
 
   // 数据
@@ -52,35 +45,28 @@
       type: Object,
       default() {},
     },
-    height: {
-      type: Number,
-      default: 100,
-    },
   });
 
   // 组件样式
   const elStyles = {
-    background: `url(${sheep.$url.cdn(props.data.src)}) no-repeat top center / 100% auto`,
-    height: props.styles.height + 'px',
-    fontStyle: props.data.title.other.includes('italic') ? 'italic' : 'normal',
-    fontWeight: props.data.title.other.includes('bold') ? 'bold' : '',
+    background: `url(${sheep.$url.cdn(props.data.bgImgUrl)}) no-repeat top center / 100% auto`,
+    fontSize: `${props.data.titleSize}px`,
+    fontWeight: `${props.data.titleWeight}px`,
   };
 
   // 标题样式
   const titleStyles = {
-    color: props.data.title.color,
-    fontSize: props.data.title.textFontSize + 'px',
-    textAlign: props.data.location,
-    marginLeft: props.data.skew + 'px',
+    color: props.data.titleColor,
+    fontSize: `${props.data.titleSize}px`,
+    textAlign: props.data.textAlign
   };
 
   // 副标题
-  const subtitleStyles = {
-    color: props.data.subtitle.color,
-    fontSize: props.data.subtitle.textFontSize + 'px',
-    textAlign: props.data.location,
-    fontStyle: props.data.subtitle.other.includes('italic') ? 'italic' : 'normal',
-    fontWeight: props.data.subtitle.other.includes('bold') ? 'bold' : '',
+  const descStyles = {
+    color: props.data.descriptionColor,
+    textAlign: props.data.textAlign,
+    fontSize: `${props.data.descriptionSize}px`,
+    fontWeight: `${props.data.descriptionWeight}px`,
   };
 </script>