mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-03-25 14:53:52 +00:00
977 lines
23 KiB
Vue
977 lines
23 KiB
Vue
<template>
|
|
<!-- 图片魔方 -->
|
|
<view v-if="picList.length">
|
|
<common-wrapper :config="configData">
|
|
<view class="pictureCube">
|
|
<view class="advert1" v-if="style == 0">
|
|
<view
|
|
class="item"
|
|
v-for="(item, index) in picList"
|
|
:key="index"
|
|
:style="[imgGap]"
|
|
@click="goDetail(item)"
|
|
>
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
width="100%"
|
|
:height="imageH + 'px'"
|
|
:image-src="item.image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="advert2" v-else-if="style == 1">
|
|
<view
|
|
class="item"
|
|
v-for="(item, index) in picList"
|
|
:key="index"
|
|
:style="[imgGap]"
|
|
@click="goDetail(item)"
|
|
>
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
:height="imageH + 'rpx'"
|
|
:image-src="item.image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="advert3" v-else-if="style == 2">
|
|
<view
|
|
class="item"
|
|
v-for="(item, index) in picList"
|
|
:key="index"
|
|
:style="[imgGap]"
|
|
@click="goDetail(item)"
|
|
>
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
:height="imageH + 'rpx'"
|
|
:image-src="item.image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="advert4" :style="[autoHeight]" v-else-if="style == 3">
|
|
<view class="item">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[0])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[0].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[1])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[1].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="item" :style="[imgGap]" @click="goDetail(picList[2])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[2].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="advert5" :style="[autoHeight]" v-else-if="style == 4">
|
|
<view class="item" :style="[imgGap]" @click="goDetail(picList[0])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[0].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="item">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[1])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[1].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[2])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[2].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="advert6" :style="[autoHeight]" v-else-if="style == 5">
|
|
<view class="item" :style="[imgGap]" @click="goDetail(picList[0])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[0].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="item">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[1])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[1].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[2])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[2].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="advert7" :style="[autoHeight]" v-else-if="style == 6">
|
|
<view class="item">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[0])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[0].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[1])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[1].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="item" :style="[imgGap]" @click="goDetail(picList[2])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[2].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="advert8" :style="[autoHeight]" v-else-if="style == 7">
|
|
<view
|
|
class="item"
|
|
:style="[imgGap]"
|
|
v-for="(item, index) in picList"
|
|
@click="goDetail(item)"
|
|
:key="index"
|
|
>
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="item.image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="advert9" :style="[autoHeight]" v-else-if="style == 8">
|
|
<view class="item">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[0])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[0].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[1])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[1].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[2])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[2].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[3])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[3].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[4])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[4].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="advert10" :style="[autoHeight]" v-else-if="style == 9">
|
|
<view class="item" :style="[imgGap]" @click="goDetail(picList[0])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[0].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="item">
|
|
<view class="pic-wrap">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[1])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[1].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="pic-wrap">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[2])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[2].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[3])">
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:image-src="picList[3].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="advert11" v-else-if="style == 10">
|
|
<view class="pic" :style="[imgGap]" @click="goDetail(picList[0])">
|
|
<easy-loadimage
|
|
mode="scaleToFill"
|
|
width="100%"
|
|
:height="imageH + 'px'"
|
|
:image-src="picList[0].image"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</view>
|
|
<view class="advert12" :style="[autoHeight]" v-else-if="style == 11">
|
|
<template v-if="dataConfig.picStyle.docPicList.length">
|
|
<view
|
|
v-for="(item, index) in dataConfig.picStyle.docPicList"
|
|
:key="index"
|
|
:style="{
|
|
top: `${(item.doc.startY / 375) * 100}%`,
|
|
left: `${(item.doc.startX / 375) * 100}%`,
|
|
width: `${(item.doc.w / 375) * 100}%`,
|
|
height: `${(item.doc.h / 375) * 100}%`,
|
|
borderWidth: `${dataConfig.imgConfig.val * 2}rpx`,
|
|
}"
|
|
class="item"
|
|
@click="goDetail(item)"
|
|
>
|
|
<easy-loadimage
|
|
mode="aspectFill"
|
|
width="100%"
|
|
height="100%"
|
|
:imageSrc="item.img"
|
|
class="image"
|
|
:borderRadius="imgBorderRadius"
|
|
></easy-loadimage>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</common-wrapper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import commonWrapper from "./commonWrapper.vue";
|
|
export default {
|
|
components: { commonWrapper },
|
|
name: "pictureCube",
|
|
props: {
|
|
dataConfig: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
picList: this.dataConfig.picStyle.picList,
|
|
style: this.dataConfig.styleConfig.tabVal,
|
|
imageH: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
configData() {
|
|
return {
|
|
...this.dataConfig,
|
|
paddingConfig: this.dataConfig.paddingConfig || {
|
|
isAll: false,
|
|
valList: [
|
|
{
|
|
val: this.dataConfig.topConfig
|
|
? this.dataConfig.topConfig.val
|
|
: 0,
|
|
},
|
|
{
|
|
val: this.dataConfig.prConfig ? this.dataConfig.prConfig.val : 0,
|
|
},
|
|
{
|
|
val: this.dataConfig.bottomConfig
|
|
? this.dataConfig.bottomConfig.val
|
|
: 0,
|
|
},
|
|
{
|
|
val: this.dataConfig.prConfig ? this.dataConfig.prConfig.val : 0,
|
|
},
|
|
],
|
|
},
|
|
marginConfig: this.dataConfig.marginConfig || {
|
|
isAll: false,
|
|
valList: [
|
|
{
|
|
val: this.dataConfig.mbConfig ? this.dataConfig.mbConfig.val : 0,
|
|
},
|
|
{
|
|
val: 0,
|
|
},
|
|
{
|
|
val: 0,
|
|
},
|
|
{
|
|
val: 0,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
imgGap() {
|
|
return {
|
|
borderWidth: `${this.dataConfig.imgConfig.val * 2}rpx`,
|
|
};
|
|
},
|
|
imgBorderRadius() {
|
|
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
|
if (this.dataConfig.filletImg.type) {
|
|
borderRadius = `${this.dataConfig.filletImg.valList[0].val * 2}rpx ${
|
|
this.dataConfig.filletImg.valList[1].val * 2
|
|
}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${
|
|
this.dataConfig.filletImg.valList[2].val * 2
|
|
}rpx`;
|
|
}
|
|
return borderRadius;
|
|
},
|
|
autoHeight() {
|
|
let windowWidth = uni.getWindowInfo().windowWidth;
|
|
return {
|
|
height: windowWidth + "px",
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
this.computedHeight();
|
|
},
|
|
methods: {
|
|
//替换安全域名
|
|
setDomain: function (url) {
|
|
url = url ? url.toString() : "";
|
|
//本地调试打开,生产请注销
|
|
if (url.indexOf("https://") > -1) return url;
|
|
else return url.replace("http://", "https://");
|
|
},
|
|
goDetail(url) {
|
|
let urls = url.link;
|
|
uni.navigateTo({
|
|
url: urls,
|
|
fail: (e) => {
|
|
uni.switchTab({ url: urls });
|
|
},
|
|
});
|
|
// this.$util.JumpPath(urls);
|
|
},
|
|
computedHeight() {
|
|
if (this.picList.length) {
|
|
let that = this;
|
|
let windowWidth = uni.getWindowInfo().windowWidth;
|
|
this.$nextTick((e) => {
|
|
if (this.style == 0) {
|
|
this.imageH = windowWidth / 2;
|
|
} else if ([1, 2].includes(this.style)) {
|
|
uni.getImageInfo({
|
|
src: that.setDomain(that.picList[0].image),
|
|
success: (res) => {
|
|
if (res && res.height > 0) {
|
|
let height =
|
|
res.height *
|
|
((this.style == 1
|
|
? 375
|
|
: 250 - that.dataConfig.prConfig.val * 2) /
|
|
res.width);
|
|
that.$set(that, "imageH", height);
|
|
} else {
|
|
that.$set(
|
|
that,
|
|
"imageH",
|
|
(this.style == 1
|
|
? 375
|
|
: 250 - that.dataConfig.prConfig.val * 2) * 2,
|
|
);
|
|
}
|
|
},
|
|
fail: function (error) {
|
|
that.$set(
|
|
that,
|
|
"imageH",
|
|
(this.style == 1
|
|
? 375
|
|
: 250 - that.dataConfig.prConfig.val * 2) * 2,
|
|
);
|
|
},
|
|
});
|
|
} else if (this.style == 10) {
|
|
uni.getImageInfo({
|
|
src: that.setDomain(that.picList[0].image),
|
|
success: (image) => {
|
|
this.imageH = (image.height * windowWidth) / image.width;
|
|
},
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pageOn {
|
|
border-radius: 24rpx !important;
|
|
|
|
.advertItem01 {
|
|
image {
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.advertItem02 {
|
|
.item {
|
|
&:nth-child(1) {
|
|
image {
|
|
border-radius: 20rpx 0 0 20rpx;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
image {
|
|
border-radius: 0 20rpx 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertItem03 {
|
|
.item {
|
|
&:nth-child(1) {
|
|
image {
|
|
border-radius: 20rpx 0 0 20rpx;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
image {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
image {
|
|
border-radius: 0 20rpx 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertItem04 {
|
|
.item {
|
|
&:nth-child(1) {
|
|
image {
|
|
border-radius: 20rpx 0 0 20rpx;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
.pic {
|
|
&:nth-child(1) {
|
|
image {
|
|
border-radius: 0 20rpx 0 0;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
image {
|
|
border-radius: 0 0 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertItem05 {
|
|
.item {
|
|
&:nth-child(1) {
|
|
image {
|
|
border-radius: 20rpx 0 0 20rpx;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
image {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
image {
|
|
border-radius: 0 20rpx 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertItem06 {
|
|
.item {
|
|
&:nth-child(1) {
|
|
image {
|
|
border-radius: 20rpx 0 0 0;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
image {
|
|
border-radius: 0 20rpx 0 0;
|
|
}
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
image {
|
|
border-radius: 0 0 0 20rpx;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
image {
|
|
border-radius: 0 0 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pictureCube {
|
|
display: flex;
|
|
background-color: #fff;
|
|
|
|
.item {
|
|
border-width: 0;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.pic {
|
|
border-width: 0;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.advert1 {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-height: 0;
|
|
border-style: solid;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert2 {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert3 {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert4 {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-height: 0;
|
|
|
|
&:nth-child(1) {
|
|
display: flex;
|
|
|
|
.pic {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert5 {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-height: 0;
|
|
|
|
&:nth-child(2) {
|
|
display: flex;
|
|
|
|
.pic {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert6 {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
&:nth-child(2) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.pic {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert7 {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
&:nth-child(1) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.pic {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert8 {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
flex: 0 0 50%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert9 {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.pic {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert10 {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
&:nth-child(2) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.pic-wrap {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
|
|
.pic {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert11 {
|
|
flex: 1;
|
|
|
|
.pic {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advert12 {
|
|
flex: 1;
|
|
position: relative;
|
|
|
|
.item {
|
|
position: absolute;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.advertItem02 {
|
|
// /deep/uni-image>img{
|
|
// position: unset;
|
|
// }
|
|
width: 100%;
|
|
|
|
.item {
|
|
width: 50%;
|
|
height: auto;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertItem03 {
|
|
.item {
|
|
width: 33.3333%;
|
|
}
|
|
}
|
|
|
|
.advertItem04 {
|
|
width: 100%;
|
|
|
|
.item {
|
|
width: 50%;
|
|
height: 200px;
|
|
|
|
.pic {
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertItem05 {
|
|
.item {
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
.advertItem06 {
|
|
.item {
|
|
width: 50%;
|
|
height: 100px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|