commit
						4c5ca70b15
					
				|  | @ -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" /> | ||||
|     <!-- 图文组件:视频播放 --> | ||||
|  | @ -28,7 +28,7 @@ | |||
|     <!-- 基础组件:分割线 --> | ||||
|     <s-line-block v-if="type === 'Divider'" :data="data" /> | ||||
|     <!-- 图文组件:热区 --> | ||||
|     <s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" /> | ||||
|     <s-hotzone-block v-if="type === 'HotZone'" :data="data" :styles="styles" /> | ||||
| 
 | ||||
|     <!-- 商品组件:商品卡片 --> | ||||
|     <s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" /> | ||||
|  |  | |||
|  | @ -25,19 +25,7 @@ | |||
|   const props = defineProps({ | ||||
|     data: { | ||||
|       type: Object, | ||||
|       default() { | ||||
|         return { | ||||
|           // horizontal vertical | ||||
|           direction: 'vertical', | ||||
|           showText: true, | ||||
|           list: [{ | ||||
|             imgUrl: 'http://localhost/logo.gif', | ||||
|             url: '', | ||||
|             text: '客服', | ||||
|             textColor: '', | ||||
|           }], | ||||
|         } | ||||
|       }, | ||||
|       default() {}, | ||||
|     } | ||||
|   }) | ||||
| 
 | ||||
|  |  | |||
|  | @ -1,16 +1,16 @@ | |||
| <template> | ||||
|   <view class="hotzone-wrap"> | ||||
|     <image :src="sheep.$url.cdn(data.src)" style="width: 100%" mode="widthFix"></image> | ||||
|     <image :src="sheep.$url.cdn(data.imgUrl)" style="width: 100%" mode="widthFix"></image> | ||||
|     <view | ||||
|       class="hotzone-box" | ||||
|       v-for="item in data.list" | ||||
|       :key="item.width" | ||||
|       v-for="(item, index) in data.list" | ||||
|       :key="index" | ||||
|       :style="[ | ||||
|         { | ||||
|           top: item.top + 'rpx', | ||||
|           left: item.left + 'rpx', | ||||
|           width: item.width + 'rpx', | ||||
|           height: item.height + 'rpx', | ||||
|           top: `${item.top}px`, | ||||
|           left: `${item.left}px`, | ||||
|           width: `${item.width}px`, | ||||
|           height: `${item.height}px`, | ||||
|         }, | ||||
|       ]" | ||||
|       @tap.stop="sheep.$router.go(item.url)" | ||||
|  |  | |||
|  | @ -197,7 +197,7 @@ | |||
|     }, | ||||
|     iconSize: { | ||||
|       type: Number, | ||||
|       default: 96, | ||||
|       default: 80, | ||||
|     }, | ||||
|     color: { | ||||
|       type: String, | ||||
|  | @ -264,13 +264,13 @@ | |||
| 
 | ||||
|     .menu-icon { | ||||
|       transform: translate(0, 0); | ||||
|       width: 98rpx; | ||||
|       height: 98rpx; | ||||
|       width: 80rpx; | ||||
|       height: 80rpx; | ||||
|       padding-bottom: 10rpx; | ||||
|     } | ||||
| 
 | ||||
|     .menu-title { | ||||
|       font-size: 30rpx; | ||||
|       font-size: 24rpx; | ||||
|       color: #333; | ||||
|     } | ||||
|   } | ||||
|  |  | |||
|  | @ -32,7 +32,7 @@ | |||
| <style lang="scss" scoped> | ||||
|   .notice-wrap { | ||||
|     .icon-img { | ||||
|       height: 60rpx; | ||||
|       height: 56rpx; | ||||
|     } | ||||
|   } | ||||
| </style> | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 芋道源码
						芋道源码