!28 商城装修

Merge pull request !28 from 疯狂的世界/master-vue3
pull/29/head^2
芋道源码 2023-12-15 15:37:44 +00:00 committed by Gitee
commit 4c5ca70b15
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
6 changed files with 37 additions and 63 deletions

View File

@ -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" />

View File

@ -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() {},
}
})

View File

@ -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)"

View File

@ -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;
}
}

View File

@ -32,7 +32,7 @@
<style lang="scss" scoped>
.notice-wrap {
.icon-img {
height: 60rpx;
height: 56rpx;
}
}
</style>

View File

@ -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>