796 lines
18 KiB
Vue
796 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<div
|
|||
|
|
class="community"
|
|||
|
|
:style="{
|
|||
|
|
background: bottomBgColor,
|
|||
|
|
marginTop: mTop + 'px',
|
|||
|
|
paddingTop: topConfig + 'px',
|
|||
|
|
paddingBottom: bottomConfig + 'px',
|
|||
|
|
paddingLeft: prConfig + 'px',
|
|||
|
|
paddingRight: prConfig + 'px',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="nav acea-row row-between-wrapper"
|
|||
|
|
:style="{
|
|||
|
|
background: `linear-gradient(90deg,${headerBgColorLeft} 0%,${headerBgColorRight} 100%)`,
|
|||
|
|
borderRadius: bgRadius,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="title"
|
|||
|
|
v-if="titleConfig"
|
|||
|
|
:style="
|
|||
|
|
(titleTabVal == 2 ? 'fontStyle:' : 'fontWeight:') +
|
|||
|
|
titleText +
|
|||
|
|
';color:' +
|
|||
|
|
titleColor +
|
|||
|
|
';fontSize:' +
|
|||
|
|
titleNumber +
|
|||
|
|
'px;'
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
{{ titleTxtConfig }}
|
|||
|
|
</div>
|
|||
|
|
<img v-else :src="imgUrl" alt="" />
|
|||
|
|
<div
|
|||
|
|
class="more"
|
|||
|
|
:style="{
|
|||
|
|
color: headerBntColor,
|
|||
|
|
fontSize: bntNumber + 'px',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ rightBntConfig
|
|||
|
|
}}<span
|
|||
|
|
class="iconfont iconjinru"
|
|||
|
|
:style="{
|
|||
|
|
fontSize: bntNumber + 'px',
|
|||
|
|
}"
|
|||
|
|
></span>
|
|||
|
|
</div>
|
|||
|
|
<img class="clover" src="@/assets/images/clover.png" />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
v-if="!styleConfig"
|
|||
|
|
class="list on acea-row row-middle"
|
|||
|
|
:style="{
|
|||
|
|
background: bgColor,
|
|||
|
|
borderRadius: bgRadius2,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="item"
|
|||
|
|
:style="{
|
|||
|
|
marginRight: videoSpace2 + 'px',
|
|||
|
|
}"
|
|||
|
|
v-for="(item, index) in videoList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<div class="pictrue">
|
|||
|
|
<img
|
|||
|
|
:style="{
|
|||
|
|
borderRadius: imgRadius,
|
|||
|
|
}"
|
|||
|
|
v-if="item.image"
|
|||
|
|
:src="item.image"
|
|||
|
|
/>
|
|||
|
|
<div
|
|||
|
|
v-else
|
|||
|
|
class="empty-box"
|
|||
|
|
:style="{
|
|||
|
|
borderRadius: imgRadius,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<img src="../../assets/images/shan.png" />
|
|||
|
|
</div>
|
|||
|
|
<div class="mask" :style="{ borderRadius: imgRadius }"></div>
|
|||
|
|
<div class="bottom">
|
|||
|
|
<div class="title line1">{{ item.desc }}</div>
|
|||
|
|
<div class="acea-row row-middle mt5">
|
|||
|
|
<div class="user">
|
|||
|
|
<img src="@/assets/images/f.png" />
|
|||
|
|
</div>
|
|||
|
|
<div class="name line1">{{ item.type_name }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
v-else
|
|||
|
|
class="list acea-row row-between"
|
|||
|
|
:style="{
|
|||
|
|
background: bgColor,
|
|||
|
|
borderRadius: bgRadius2,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="item"
|
|||
|
|
:style="{
|
|||
|
|
marginBottom: videoSpace + 'px',
|
|||
|
|
}"
|
|||
|
|
v-for="(item, index) in videoList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<div class="pictrue">
|
|||
|
|
<img
|
|||
|
|
:style="{
|
|||
|
|
borderRadius: imgRadius,
|
|||
|
|
}"
|
|||
|
|
v-if="item.image"
|
|||
|
|
:src="item.image"
|
|||
|
|
/>
|
|||
|
|
<div
|
|||
|
|
v-else
|
|||
|
|
class="empty-box"
|
|||
|
|
:style="{
|
|||
|
|
borderRadius: imgRadius,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<img src="../../assets/images/shan.png" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info">
|
|||
|
|
<div class="title">{{ item.desc }}</div>
|
|||
|
|
<div class="txtPic acea-row row-between-wrapper">
|
|||
|
|
<div class="acea-row row-middle">
|
|||
|
|
<div class="user">
|
|||
|
|
<img src="@/assets/images/f.png" />
|
|||
|
|
</div>
|
|||
|
|
<div class="name line1">{{ item.type_name }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="num">
|
|||
|
|
<span
|
|||
|
|
class="iconfont iconic_Like"
|
|||
|
|
:style="{
|
|||
|
|
color: toneConfig
|
|||
|
|
? `${likeSuccessColor}`
|
|||
|
|
: `${colorStyle.theme}`,
|
|||
|
|
}"
|
|||
|
|
></span
|
|||
|
|
>212
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { mapState, mapMutations } from "vuex";
|
|||
|
|
import { videoList } from "@/api/marketing";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "home_community",
|
|||
|
|
cname: "种草社区",
|
|||
|
|
configName: "c_community",
|
|||
|
|
icon: "#iconzujian-zhongcaoshequ",
|
|||
|
|
type: 1, // 0 基础组件 1 营销组件 2工具组件
|
|||
|
|
defaultName: "community", // 外面匹配名称
|
|||
|
|
props: {
|
|||
|
|
index: {
|
|||
|
|
type: null,
|
|||
|
|
},
|
|||
|
|
num: {
|
|||
|
|
type: null,
|
|||
|
|
},
|
|||
|
|
colorStyle: {
|
|||
|
|
type: null,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState("admin/mobildConfig", ["defaultArray"]),
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
pageData: {
|
|||
|
|
handler(nVal, oVal) {
|
|||
|
|
this.setConfig(nVal, 1);
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
num: {
|
|||
|
|
handler(nVal, oVal) {
|
|||
|
|
let data = this.$store.state.admin.mobildConfig.defaultArray[nVal];
|
|||
|
|
this.setConfig(data);
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
defaultArray: {
|
|||
|
|
handler(nVal, oVal) {
|
|||
|
|
let data = this.$store.state.admin.mobildConfig.defaultArray[this.num];
|
|||
|
|
this.setConfig(data, 1);
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 默认初始化数据禁止修改
|
|||
|
|
defaultConfig: {
|
|||
|
|
cname: "种草社区",
|
|||
|
|
name: "community",
|
|||
|
|
timestamp: this.num,
|
|||
|
|
isHide: false,
|
|||
|
|
setUp: {
|
|||
|
|
tabVal: 0,
|
|||
|
|
},
|
|||
|
|
titleLeft: "内容设置",
|
|||
|
|
titleHead: "头部设置",
|
|||
|
|
titleContent: "内容展示",
|
|||
|
|
titleRight: "头部样式",
|
|||
|
|
titleVideoStyle: "内容样式",
|
|||
|
|
titleCurrency: "通用样式",
|
|||
|
|
styleConfig: {
|
|||
|
|
title: "选择风格",
|
|||
|
|
tabVal: 0,
|
|||
|
|
tabList: [
|
|||
|
|
{
|
|||
|
|
name: "左右滑动展示",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "两列展示（纵向）",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
titleConfig: {
|
|||
|
|
title: "标题类型",
|
|||
|
|
tabVal: 0,
|
|||
|
|
tabList: [
|
|||
|
|
{
|
|||
|
|
name: "图片",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "文字",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
imgConfig: {
|
|||
|
|
info: "建议：128px * 32px",
|
|||
|
|
url: require("@/assets/images/community.png"),
|
|||
|
|
type: "code",
|
|||
|
|
delType: 0,
|
|||
|
|
name: "上传图片",
|
|||
|
|
},
|
|||
|
|
titleTxtConfig: {
|
|||
|
|
title: "标题文字",
|
|||
|
|
value: "种草社区",
|
|||
|
|
place: "请输入标题文字",
|
|||
|
|
max: 6,
|
|||
|
|
},
|
|||
|
|
rightBntConfig: {
|
|||
|
|
title: "右侧文字",
|
|||
|
|
value: "好物分享",
|
|||
|
|
place: "请输入右侧文字",
|
|||
|
|
max: 6,
|
|||
|
|
},
|
|||
|
|
numberConfig: {
|
|||
|
|
title: "内容数量",
|
|||
|
|
val: 3,
|
|||
|
|
min: 1,
|
|||
|
|
},
|
|||
|
|
selectConfig: {
|
|||
|
|
title: "内容话题",
|
|||
|
|
activeValue: "",
|
|||
|
|
list: [
|
|||
|
|
{
|
|||
|
|
activeValue: "",
|
|||
|
|
title: "",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
activeValue: "",
|
|||
|
|
title: "",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
headerBgColor: {
|
|||
|
|
title: "背景颜色",
|
|||
|
|
name: "headerBgColor",
|
|||
|
|
default: [
|
|||
|
|
{
|
|||
|
|
item: "#E93323",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
item: "#FF7931",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
color: [
|
|||
|
|
{
|
|||
|
|
item: "#E93323",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
item: "#FF7931",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
titleText: {
|
|||
|
|
title: "标题文字",
|
|||
|
|
tabVal: 0,
|
|||
|
|
tabList: [
|
|||
|
|
{
|
|||
|
|
name: "加粗",
|
|||
|
|
style: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "正常",
|
|||
|
|
style: "normal",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "倾斜",
|
|||
|
|
style: "italic",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
titleColor: {
|
|||
|
|
title: "标题颜色",
|
|||
|
|
name: "titleColor",
|
|||
|
|
default: [
|
|||
|
|
{
|
|||
|
|
item: "#fff",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
color: [
|
|||
|
|
{
|
|||
|
|
item: "#fff",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
titleNumber: {
|
|||
|
|
title: "标题字号",
|
|||
|
|
val: 16,
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
headerBntColor: {
|
|||
|
|
title: "按钮文字",
|
|||
|
|
name: "headerBntColor",
|
|||
|
|
default: [
|
|||
|
|
{
|
|||
|
|
item: "#fff",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
color: [
|
|||
|
|
{
|
|||
|
|
item: "#fff",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
bntNumber: {
|
|||
|
|
title: "按钮大小",
|
|||
|
|
val: 12,
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
videoSpace: {
|
|||
|
|
title: "内容间距",
|
|||
|
|
val: 20,
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
videoSpace2: {
|
|||
|
|
title: "内容间距",
|
|||
|
|
val: 10,
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
filletImg: {
|
|||
|
|
title: "内容圆角",
|
|||
|
|
type: 0,
|
|||
|
|
list: [
|
|||
|
|
{
|
|||
|
|
val: "全部",
|
|||
|
|
icon: "iconcaozuo-zhengti",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
val: "单个",
|
|||
|
|
icon: "iconcaozuo-bianjiao",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
valName: "圆角值",
|
|||
|
|
val: 8,
|
|||
|
|
min: 0,
|
|||
|
|
valList: [{ val: 0 }, { val: 0 }, { val: 0 }, { val: 0 }],
|
|||
|
|
},
|
|||
|
|
toneConfig: {
|
|||
|
|
title: "色调",
|
|||
|
|
tabVal: 0,
|
|||
|
|
tabList: [
|
|||
|
|
{
|
|||
|
|
name: "跟随主题风格",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "自定义",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
likeSuccessColor: {
|
|||
|
|
title: "点赞成功",
|
|||
|
|
default: [
|
|||
|
|
{
|
|||
|
|
item: "#E93323",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
color: [
|
|||
|
|
{
|
|||
|
|
item: "#E93323",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
moduleColor: {
|
|||
|
|
title: "组件背景",
|
|||
|
|
default: [
|
|||
|
|
{
|
|||
|
|
item: "#fff",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
item: "#fff",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
color: [
|
|||
|
|
{
|
|||
|
|
item: "#fff",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
item: "#fff",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
bottomBgColor: {
|
|||
|
|
title: "底部背景",
|
|||
|
|
default: [
|
|||
|
|
{
|
|||
|
|
item: "#f5f5f5",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
color: [
|
|||
|
|
{
|
|||
|
|
item: "#f5f5f5",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
topConfig: {
|
|||
|
|
title: "上边距",
|
|||
|
|
val: 0,
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
bottomConfig: {
|
|||
|
|
title: "下边距",
|
|||
|
|
val: 0,
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
prConfig: {
|
|||
|
|
title: "左右边距",
|
|||
|
|
val: 10,
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
mbConfig: {
|
|||
|
|
title: "页面上间距",
|
|||
|
|
val: 0,
|
|||
|
|
min: 0,
|
|||
|
|
},
|
|||
|
|
fillet: {
|
|||
|
|
title: "背景圆角",
|
|||
|
|
type: 0,
|
|||
|
|
list: [
|
|||
|
|
{
|
|||
|
|
val: "全部",
|
|||
|
|
icon: "iconcaozuo-zhengti",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
val: "单个",
|
|||
|
|
icon: "iconcaozuo-bianjiao",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
valName: "圆角值",
|
|||
|
|
val: 8,
|
|||
|
|
min: 0,
|
|||
|
|
valList: [{ val: 0 }, { val: 0 }, { val: 0 }, { val: 0 }],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
pageData: {},
|
|||
|
|
videoList: [],
|
|||
|
|
numberConfig: 0,
|
|||
|
|
headerBgColorLeft: "",
|
|||
|
|
headerBgColorRight: "",
|
|||
|
|
styleConfig: 0,
|
|||
|
|
titleConfig: 0,
|
|||
|
|
imgUrl: "",
|
|||
|
|
headerBntColor: "",
|
|||
|
|
rightBntConfig: "",
|
|||
|
|
titleTxtConfig: "",
|
|||
|
|
numberConfig: 0,
|
|||
|
|
titleText: 0,
|
|||
|
|
titleColor: "",
|
|||
|
|
titleNumber: 0,
|
|||
|
|
videoSpace: 0,
|
|||
|
|
videoSpace2: 0,
|
|||
|
|
imgRadius: 0,
|
|||
|
|
bgColor: "",
|
|||
|
|
bgRadius: 0,
|
|||
|
|
bgRadius2: 0,
|
|||
|
|
bottomBgColor: "",
|
|||
|
|
mTop: 0,
|
|||
|
|
topConfig: 0,
|
|||
|
|
bottomConfig: 0,
|
|||
|
|
prConfig: 0,
|
|||
|
|
bntNumber: 0,
|
|||
|
|
toneConfig: 0,
|
|||
|
|
likeSuccessColor: "",
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.pageData =
|
|||
|
|
this.$store.state.admin.mobildConfig.defaultArray[this.num];
|
|||
|
|
this.setConfig(this.pageData);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getVideoList(limit) {
|
|||
|
|
this.videoList = [
|
|||
|
|
{
|
|||
|
|
image: require("@/assets/images/shequ_1.png"),
|
|||
|
|
like_num: 120,
|
|||
|
|
type_image: require("@/assets/images/yonghu.png"),
|
|||
|
|
type_name: "浅笑回眸",
|
|||
|
|
desc: "啊啊啊啊啊啊啊！！就这条吊带裙绝了！",
|
|||
|
|
product_num: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
image: require("@/assets/images/shequ_2.png"),
|
|||
|
|
like_num: 120,
|
|||
|
|
type_image: require("@/assets/images/yonghu.png"),
|
|||
|
|
type_name: "国宝小熊猫",
|
|||
|
|
desc: "像我这种梨形身材又不想露腿的 就喜欢这种裙摆...",
|
|||
|
|
product_num: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
image: require("@/assets/images/shequ_4.png"),
|
|||
|
|
like_num: 120,
|
|||
|
|
type_image: require("@/assets/images/yonghu.png"),
|
|||
|
|
type_name: "阿秋",
|
|||
|
|
desc: "观看视频crmeb更多好礼等你来抢，每天都有哟～ 更多好礼请联…",
|
|||
|
|
product_num: 3,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
},
|
|||
|
|
setConfig(data, num) {
|
|||
|
|
if (!data) return;
|
|||
|
|
if (data.mbConfig) {
|
|||
|
|
this.headerBgColorLeft = data.headerBgColor.color[0].item;
|
|||
|
|
this.headerBgColorRight = data.headerBgColor.color[1].item;
|
|||
|
|
this.styleConfig = data.styleConfig.tabVal;
|
|||
|
|
this.titleConfig = data.titleConfig.tabVal;
|
|||
|
|
this.imgUrl = data.imgConfig.url;
|
|||
|
|
this.headerBntColor = data.headerBntColor.color[0].item;
|
|||
|
|
this.rightBntConfig = data.rightBntConfig.value;
|
|||
|
|
this.titleTxtConfig = data.titleTxtConfig.value;
|
|||
|
|
this.numberConfig = data.numberConfig.val;
|
|||
|
|
this.bntNumber = data.bntNumber.val;
|
|||
|
|
let tabVal = data.titleText.tabVal;
|
|||
|
|
this.titleTabVal = tabVal;
|
|||
|
|
this.titleText = data.titleText.tabList[tabVal].style;
|
|||
|
|
this.titleColor = data.titleColor.color[0].item;
|
|||
|
|
this.titleNumber = data.titleNumber.val;
|
|||
|
|
this.videoSpace = data.videoSpace.val;
|
|||
|
|
this.videoSpace2 = data.videoSpace2.val;
|
|||
|
|
this.toneConfig = data.toneConfig.tabVal;
|
|||
|
|
this.likeSuccessColor = data.likeSuccessColor.color[0].item;
|
|||
|
|
let filletImg = data.filletImg.type;
|
|||
|
|
let filletValImg = data.filletImg.val;
|
|||
|
|
let valListImg = data.filletImg.valList;
|
|||
|
|
this.imgRadius = filletImg
|
|||
|
|
? valListImg[0].val +
|
|||
|
|
"px " +
|
|||
|
|
valListImg[1].val +
|
|||
|
|
"px " +
|
|||
|
|
valListImg[3].val +
|
|||
|
|
"px " +
|
|||
|
|
valListImg[2].val +
|
|||
|
|
"px"
|
|||
|
|
: filletValImg + "px";
|
|||
|
|
let bgColorLeft = data.moduleColor.color[0].item;
|
|||
|
|
let bgColorRight = data.moduleColor.color[1].item;
|
|||
|
|
this.bgColor = `linear-gradient(90deg,${bgColorLeft} 0%,${bgColorRight} 100%)`;
|
|||
|
|
let fillet = data.fillet.type;
|
|||
|
|
let filletVal = data.fillet.val;
|
|||
|
|
let valList = data.fillet.valList;
|
|||
|
|
this.bgRadius = fillet
|
|||
|
|
? valList[0].val + "px " + valList[1].val + "px 0 0"
|
|||
|
|
: filletVal + "px " + filletVal + "px 0 0";
|
|||
|
|
this.bgRadius2 = fillet
|
|||
|
|
? "0 0 " + valList[3].val + "px " + valList[2].val + "px"
|
|||
|
|
: "0 0 " + filletVal + "px " + filletVal + "px";
|
|||
|
|
this.bottomBgColor = data.bottomBgColor.color[0].item;
|
|||
|
|
this.mTop = data.mbConfig.val;
|
|||
|
|
this.topConfig = data.topConfig.val;
|
|||
|
|
this.bottomConfig = data.bottomConfig.val;
|
|||
|
|
this.prConfig = data.prConfig.val;
|
|||
|
|
if (num) {
|
|||
|
|
this.getVideoList(this.numberConfig);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.community {
|
|||
|
|
.nav {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 48px;
|
|||
|
|
padding: 0 12px;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 64px;
|
|||
|
|
height: 16px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.clover {
|
|||
|
|
width: 52px;
|
|||
|
|
height: 54px;
|
|||
|
|
display: block;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 9px;
|
|||
|
|
right: 91px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.more {
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 12px;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
padding: 12px 10px;
|
|||
|
|
|
|||
|
|
&.on {
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: 140px;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
|
|||
|
|
.pictrue {
|
|||
|
|
width: 140px;
|
|||
|
|
height: 175px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
|
|||
|
|
.bottom {
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: 400;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 6px 8px;
|
|||
|
|
z-index: 10;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-size: 9px;
|
|||
|
|
width: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user {
|
|||
|
|
width: 17px;
|
|||
|
|
height: 17px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 4px;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mask {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
z-index: 10;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
180deg,
|
|||
|
|
rgba(0, 0, 0, 0) 0%,
|
|||
|
|
rgba(0, 0, 0, 0.4) 100%
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: 48%;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
&:nth-last-child(1) {
|
|||
|
|
margin-bottom: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pictrue {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 241px;
|
|||
|
|
position: relative;
|
|||
|
|
margin-right: unset;
|
|||
|
|
margin-bottom: unset;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: block;
|
|||
|
|
// object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-box {
|
|||
|
|
background-color: #f3f9ff;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 65px;
|
|||
|
|
height: 50px;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info {
|
|||
|
|
font-weight: 400;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #999999;
|
|||
|
|
|
|||
|
|
.iconfont {
|
|||
|
|
margin-right: 5px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txtPic {
|
|||
|
|
margin-top: 11px;
|
|||
|
|
|
|||
|
|
.user {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|