Merge branch 'dev-sws' into dev
gongfuxiang
commit
a367337853
|
|
@ -1,39 +1,41 @@
|
|||
<template>
|
||||
<view class="bg-white pf top-0 left-0 right-0" :style="'padding-top:' + bar_height + 'rpx'">
|
||||
<view class="header-content flex-row align-c" :style="nav_bar_height">
|
||||
<view class="model-top flex-1" :style="position">
|
||||
<view class="roll pr z-i" :style="roll_style">
|
||||
<view class="model-head tc pr padding-horizontal-sm flex-row align-c" :style="header_style">
|
||||
<view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
|
||||
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
|
||||
<template v-if="['2', '3'].includes(form.content.theme)">
|
||||
<view class="logo-outer-style">
|
||||
<image-empty :image-src="form.content.logo[0].url" class="logo-style" error-style="width:40rpx;height:40rpx;"></image-empty>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
|
||||
<template v-if="['3', '5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
|
||||
<view class="flex-row align-c gap-2">
|
||||
<iconfont name="icon-location" size="12" color="0"></iconfont>
|
||||
<span class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</span>
|
||||
<iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
|
||||
<view class="header-container" :style="roll_style + position">
|
||||
<view class="bg-white pf top-0 left-0 right-0 margin-bottom-sm" :style="top_content_style">
|
||||
<view class="header-content flex-row align-c">
|
||||
<view class="model-top flex-1">
|
||||
<view class="roll pr z-i">
|
||||
<view class="model-head tc pr padding-horizontal-sm flex-row align-c" :style="header_style">
|
||||
<view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
|
||||
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
|
||||
<template v-if="['2', '3'].includes(form.content.theme)">
|
||||
<view class="logo-outer-style">
|
||||
<image-empty :image-src="form.content.logo[0].url" class="logo-style" error-style="width:40rpx;height:40rpx;"></image-empty>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
|
||||
<template v-if="['3', '5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<template v-if="['5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
|
||||
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
|
||||
<view class="flex-row align-c gap-2">
|
||||
<iconfont name="icon-location" size="12" color="0"></iconfont>
|
||||
<span class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</span>
|
||||
<iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
|
||||
</view>
|
||||
<template v-if="['5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'pa right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
|
||||
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }">
|
||||
<image-empty v-if="item.img.length > 0" :image-src="item.img[0].url" :error-style="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></image-empty>
|
||||
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'pa right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
|
||||
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }">
|
||||
<image-empty v-if="item.img.length > 0" :image-src="item.img[0].url" :error-style="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></image-empty>
|
||||
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -67,15 +69,22 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
bar_height: bar_height,
|
||||
form: {},
|
||||
new_style: {},
|
||||
position: '',
|
||||
roll_style: '',
|
||||
text_style: '',
|
||||
header_style: 'max-width:100%',
|
||||
// 导航栏高度
|
||||
nav_bar_height: 'height:120rpx;',
|
||||
common_app_is_header_nav_fixed: 0,
|
||||
// #ifdef MP
|
||||
top_content_style: 'padding-top:' + (bar_height + 5) + 'px;',
|
||||
// #endif
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
top_content_style: 'padding-top:' + (bar_height + 7) + 'px;',
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
top_content_style: 'padding-top:' + bar_height + 'px;',
|
||||
// #endif
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -100,21 +109,16 @@
|
|||
// 小程序下，获取小程序胶囊的宽度
|
||||
let menuButtonInfo = 'max-width:100%';
|
||||
|
||||
//获取手机状态栏高度
|
||||
let new_nav_bar_height = 60;
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU
|
||||
const custom = uni.getMenuButtonBoundingClientRect();
|
||||
new_nav_bar_height = custom.height + (custom.top - bar_height) * 2;
|
||||
console.log('new_nav_bar_height', new_nav_bar_height);
|
||||
menuButtonInfo = `max-width:calc(100% - ${custom.width + 130}rpx);padding-top:${new_nav_bar_height}rpx`;
|
||||
menuButtonInfo = `max-width:calc(100% - ${custom.width + 130}rpx);`;
|
||||
// #endif
|
||||
this.setData({
|
||||
form: this.value,
|
||||
nav_bar_height: `height:${new_nav_bar_height * 2}rpx;`,
|
||||
position: (new_style.up_slide_display == '1' ? 'position:absolute;' : 'position:relative;') + 'top:' + bar_height + 'rpx;',
|
||||
position: new_style.up_slide_display == '1' ? 'position:absolute;' : 'position:relative;',
|
||||
roll_style: new_roll_style,
|
||||
text_style: `font-weight:${new_style.header_background_title_typeface}; font-size: ${new_style.header_background_title_size * 2}rpx; color: ${new_style.header_background_title_color};`,
|
||||
header_style: `height:${new_nav_bar_height * 2}rpx;` + menuButtonInfo,
|
||||
header_style: menuButtonInfo,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
|
@ -122,37 +126,37 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.model-top {
|
||||
left: 50%;
|
||||
.header-container {
|
||||
z-index: 2;
|
||||
transform: translateX(-50%);
|
||||
.roll {
|
||||
width: 780rpx;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
.model-top {
|
||||
.roll {
|
||||
width: 780rpx;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
.img {
|
||||
width: 680rpx;
|
||||
}
|
||||
}
|
||||
.img {
|
||||
width: 680rpx;
|
||||
.model-head {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.model-head {
|
||||
overflow: hidden;
|
||||
}
|
||||
.model-head-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 64rpx;
|
||||
.function-icon {
|
||||
.model-head-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 64rpx;
|
||||
.function-icon {
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-outer-style {
|
||||
height: 64rpx;
|
||||
.logo-style {
|
||||
.logo-outer-style {
|
||||
height: 64rpx;
|
||||
width: 64rpx;
|
||||
.logo-style {
|
||||
height: 64rpx;
|
||||
width: 64rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<view>
|
||||
<componentDiy :value="diy_data"></componentDiy>
|
||||
<!-- <componentDiy :value="diy_data"></componentDiy> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentDiy from '@/components/diy/diy';
|
||||
import initData from './init_data';
|
||||
// import initData from './init_data';
|
||||
export default {
|
||||
components: {
|
||||
componentDiy,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
diy_data: initData,
|
||||
// diy_data: initData,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(initData);
|
||||
// console.log(initData);
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue