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