project/components/customizate.vue

1428 lines
72 KiB
Vue
Raw Normal View History

2024-07-14 15:48:34 +08:00
<template>
<view class="customizate">
<!-- 头部 -->
<cover-view class="fix">
<cover-view class="c_main c_main1">
<cover-image src="https://weiapi.youbeiw.top/images/customizate/head_bg.png"
class="head_bg"></cover-image>
<!-- <cover-view class="flex head_list">
<cover-view class="item active" @click="changeTab(1)">
赠送版
</cover-view>
<cover-view class="item" @click="changeTab(2)">
专业版
</cover-view>
</cover-view> -->
<cover-view class="flex pd info">
<cover-view class="people">
<cover-image src="https://weiapi.youbeiw.top/images/customizate/head.png" mode="widthFix"
class="head"></cover-image>
<cover-view class="cut">
<cover-image src="https://weiapi.youbeiw.top/images/customizate/cut.png" mode="widthFix"
class="cut_img"></cover-image>
</cover-view>
</cover-view>
<cover-view class="right">
<cover-view class="flex top">
<cover-view class="name">李小懒晚上好</cover-view>
<cover-view class="weather">广州丨晴 15~27</cover-view>
</cover-view>
<cover-view class="flex bottom">
2023年11月25日
<cover-image src="https://weiapi.youbeiw.top/images/customizate/down_icon.png"
mode="widthFix" class="down_icon"></cover-image>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
</cover-view>
<!-- 日历 -->
<view class="c_main c_mainBg mb c_main2">
<view class="calendar">
<!-- viewType="week" -->
<ren-calendar ref="ren" :open="false" :markDays='markDays' :headerBar='false'
@onDayClick='selectCalend'></ren-calendar>
<!-- <calendar calendarConfig="{{calendarConfig}}"></calendar> -->
<!-- <uni-calendar :insert="true" :lunar="true" :start-date="'1950-1-1'" @change="selectCalend" /> -->
</view>
<view class="down">
<view class="down_child" @click="onSwitchView">
展开
<image :class="`${weekMode ? '':'xz'}`"
src="https://weiapi.youbeiw.top/images/customizate/calendar_down_icon.png" mode="widthFix">
</image>
</view>
</view>
</view>
<!-- 今日运势 -->
<view class="c_main c_mainBg mb c_main3">
<view class="flex top">
<view class="number">25</view>
<view class="right">
<view class="title">兔年农历十月十三</view>
<view class="flex r3_list">
<view class="r3_item">癸卯年</view>
<view class="r3_item">类亥月</view>
<view class="r3_item">丁亥日</view>
</view>
</view>
</view>
<view class="flex bottom">
<view class="flex left">
<view class="name">小雪</view>
<view class="day">第04天</view>
</view>
<view class="right">
谨小慎微才能避免大祸
<image class="right_icon" src="https://weiapi.youbeiw.top/images/customizate/right_icon.png"
mode="widthFix"></image>
</view>
</view>
</view>
<!-- 今日运程总分 -->
<view class="c_main c_mainBg pd mb c_main4">
<view class="com_title">今日运程总分</view>
<view class="flex info">
<view class="echart" id="echart1" ref="echart1">
<!-- <ec-canvas id="dispace_charts" canvas-id="dispace_charts" force-use-old-canvas="true" ec="{{ ec_dispace_charts }}"></ec-canvas> -->
</view>
<view class="list">
<view class="flex item" v-for="(item,index) in haulList" :key="item.id">
<view class="name">{{item.name}}</view>
<view class="progressBox">
<view class="progressChild">
<progress border-radius="15" :activeColor="item.color" :percent="item.progress" active
stroke-width="8" class="progress" />
</view>
<view class="p_icon" :style="`border-top-color:${item.color};left: ${item.progress}%;`">
</view>
</view>
<view class="tips">{{item.tips}}</view>
</view>
</view>
</view>
</view>
<!-- 今日师傅点评-赠送版 -->
<view class="c_main c_mainBg pd mb c_main5">
<view class="com_title">今日师傅点评-简易版</view>
<view class="r_list r_listSimple">
<view class="r_text">{{remarkList[0].text}}</view>
<view class="r_bg"></view>
<view class="btnBox_postion">
<view class="anima btnBox">
<image class="btn" src="https://weiapi.youbeiw.top/images/customizate/btn.png" mode="widthFix">
</image>
<view class="wz">升级专业版</view>
</view>
</view>
</view>
</view>
<!-- 会员-赠送版 -->
<view class="c_main c_mainBg pd mb member_infoBox">
<view class="flex member_info">
<view class="flex left">
<image class="crown" src="https://weiapi.youbeiw.top/images/customizate/crown.png" mode="widthFix">
</image>
<view class="text">剩余多项特权未解锁</view>
</view>
<view class="btn">立即解锁</view>
</view>
<view class="member_info1">
<view class="title">
解锁完整内容立享
<view class="point">四大专属内容</view>
</view>
<view class="flex m_list">
<view class="m_item" v-for="(item,index) in memberList" :key="item.id">
<image class="exclusive_icon" :src="item.img" mode="widthFix"></image>
<view class="name">{{item.name}}</view>
</view>
</view>
<view class="h_info">
<view class="recomBtn">推荐解锁</view>
<view class="flex h_info_child">
<image class="oldPerson" src="https://weiapi.youbeiw.top/images/customizate/oldPerson.png"
mode="widthFix"></image>
<view class="personText">
<view class="personTit">专业版</view>
<text class="personTip">时辰运势
每日详评
穿搭推荐
食物推荐
</text>
</view>
</view>
<image class="anima textBtn" src="https://weiapi.youbeiw.top/images/customizate/textBtn.png"
mode="widthFix"></image>
</view>
</view>
</view>
<!-- 今日时间宜忌-赠送版 -->
<view class="c_main c_mainBg mb pd c_mainMember1">
<view class="com_title">今日时间宜忌</view>
<view class="s_table">
<view class="flex s_tableItem" v-for="(item,index) in suitableList" :key="item.id">
<view class="title">{{item.title}}</view>
<view class="right">
<view class="flex right_i1" v-for="(child,childId) in item.child" :key="child.childId">
<image class="textBtn" :src="child.name" mode="widthFix"></image>
<view class="flex right_list">
<view :class="`right_item right_item${child.childId}`"
v-for="(smallChild,smallChildId) in child.info" :key="smallChildId">{{smallChild}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="flex s_info">
<image class="oldPersonHead" src="https://weiapi.youbeiw.top/images/customizate/oldPersonHead.png"
mode="widthFix"></image>
<view class="teacher_text">
<view class="name">师傅推荐升级专业版</view>
<text class="text">你想预测今天12个时辰
你的运势分别如何嘛</text>
</view>
<view class="btn">升级专业版解锁</view>
</view>
</view>
<!-- 历史上的今天 -->
<view class="c_main c_mainBg pd c_main11">
<view class="flex com_title">
<view class="name">历史上的今天</view>
<view class="more">更多<image class="rightIcon"
src="https://weiapi.youbeiw.top/images/customizate/right_icon.png" mode="widthFix"></image>
</view>
</view>
<view class="h_list">
<view class="flex h_item" v-for="(item,index) in historyList" :key="item.id">
<view class="title">{{item.title}}</view>
<view class="text">{{item.text}}</view>
</view>
</view>
</view>
<!-- 今日师傅点评-专业版 -->
<view class="c_main c_mainBg pd c_main5 c_mainMember2" v-if="currentTab==1">
<view class="com_title">今日师傅点评-专业版</view>
<view class="r_list">
<view class="r_item" v-for="(item,index) in remarkList" :key="item.id">
<view class="r_title" :style="`background-color: ${item.color}`">
{{item.title}}
</view>
<view class="r_text">
{{item.text}}
</view>
<view class="r_bg"></view>
<view class="btnBox_postion">
<view class="anima btnBox">
<image class="btn" src="https://weiapi.youbeiw.top/images/customizate/btn.png"
mode="widthFix">
</image>
<view class="wz">立即解锁专业版</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
export default {
data() {
return {
curDate: '',
markDays: [],
weekMode: true,
currentTab: 1,
haulList: [{ //今日运程总分
name: '综合',
progress: '70',
tips: '顺风顺水',
color: '#567AFF',
id: 1,
}, {
name: '感情',
progress: '85',
tips: '甜蜜无间',
color: '#F35D6A',
id: 2,
}, {
name: '财富',
progress: '50',
tips: '有气无力',
color: '#F3C05D',
id: 3,
}],
remarkList: [{ //今日师傅点评
title: '今日感情',
text: '今天你的感情运还算不错,喜欢的人或许会主动联系你,问你有没有时间出来一起吃个饭,虽然你表面上没有什么反应,其实内心早就乐开了花,让你期待与对方的相聚,也可以趁这个机会去更近一步了解彼此,增进两人的关系。在这里灵妹妹建议你,可以提前准备一些小礼物送给对方,不需要太昂贵,如果是亲手做的将更有意义,关系也能更近一步。',
color: '#516EFF',
id: 1,
}, {
title: '今日财运',
text: '今天你的事业运较差,做什么都不在状态,也没什么精气神,可能是昨晚熬夜赶任务,导致你今天整个人有点混乱,情绪不稳,这个时候可以先放下手中活,泡杯咖啡,放松一下心情,不然再继续也是无用功;如果是找工作的状态,那么最好能找准领域,不要太分散,否则会更加迷茫。在这里灵妹妹提醒你,对待工作要全身心的投入,才能保证工作的质量,不断的提高自己的职能,才能让自己在当今社会立于不败之地。',
color: '#F64747',
id: 2,
}, {
title: '综合点评',
text: '今天的你相当冷静、有力量,清醒的头脑让你能看透很多事情,有很多自己想法,并且能得同事及上司的欣赏。职场上坚定的态度让你能采取措施排除困难、完成目标。今天亦适合与你的伴侣或挚友深入的沟通,你们之间的羁绊会变得更深,关系也将会更加稳定的向前发展,感情也会越来越深。',
color: '#6D6060',
id: 3,
}],
historyList: [{
id: 1,
title: '时间',
text: '2023年11月 农历十月十四'
}, {
id: 2,
title: '656年',
text: '唐朝皇帝唐中宗李显出生'
}, {
id: 3,
title: '1161年',
text: '金朝与南宋发生采石之战'
}, {
id: 4,
title: '1504年',
text: '西班牙卡斯提亚女王伊莎贝拉一世逝安'
}],
memberList: [{
id: 1,
name: '时辰运势 ',
img: 'https://weiapi.youbeiw.top/images/customizate/exclusive_icon1.png'
}, {
id: 2,
name: '每日详评 ',
img: 'https://weiapi.youbeiw.top/images/customizate/exclusive_icon2.png'
}, {
id: 3,
name: '穿搭推荐 ',
img: 'https://weiapi.youbeiw.top/images/customizate/exclusive_icon3.png'
}, {
id: 4,
name: '食物推荐 ',
img: 'https://weiapi.youbeiw.top/images/customizate/exclusive_icon4.png'
}],
suitableList: [{ //今日忌宜
id: 1,
title: '传统',
child: [{
childId: 1,
name: 'https://weiapi.youbeiw.top/images/customizate/icon1.png',
info: ["结婚", "打扫卫生", "打扫", "结婚", "打扫卫生", "打扫"]
},
{
childId: 2,
name: 'https://weiapi.youbeiw.top/images/customizate/icon2.png',
info: ["安门", "出行旅游", "游玩", "结婚", "打扫卫生", "打扫"]
}
]
}, {
id: 2,
title: '日常',
child: [{
childId: 1,
name: 'https://weiapi.youbeiw.top/images/customizate/icon1.png',
info: ["结婚", "打扫卫生", "打扫", "结婚", "打扫卫生", "打扫"]
},
{
childId: 2,
name: 'https://weiapi.youbeiw.top/images/customizate/icon2.png',
info: ["安门", "出行旅游", "游玩", "结婚", "打扫卫生", "打扫"]
}
]
}]
}
},
components: {
RenCalendar
},
onLaunch: function() {},
onLoad() {},
mounted() {
var _that = this;
let today = this.$refs.ren.getToday().date;
this.curDate = today;
this.markDays.push(today);
},
methods: {
selectCalend(option) {
this.curDate = option.date;
},
changeTab(val) {
this.$emit('changeTabs', {
currentTab: val
})
},
onSwitchView() {
uni.navigateTo({
url: '/pages/almanac/index'
})
},
},
onShow: function() {},
onHide: function() {}
}
</script>
<script module="echarts" lang="renderjs">
import * as echarts from 'echarts' // 引入ECharts库
import 'echarts-liquidfill'
let angle = 0; //角度,用来做简单的动画效果的
export default {
data() {
return {
chart: null,
}
},
mounted() {
// 今日运程
var _that = this;
angle = angle + 3;
var dispaceData = {
value: [0.5, 0.3, 0.4],
centerValue: 30,
}
this.initCharts(0, document.getElementById('echart1'), dispaceData);
setInterval(function() {
if (_that.chart) {
angle = angle + 3;
_that.chart.setOption(_that.setOption(dispaceData));
}
}, 100);
},
methods: {
getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
return {
x: x1,
y: y1,
};
},
initCharts: function(type, element, value) {
// 获取组件的 canvas、width、height 后的回调函数
// 在这里初始化图表
var _that = this;
_that.chart = echarts.init(element);
if (type === 0) {
_that.chart.setOption(_that.setOption(value));
}
},
setOption(options) {
var _that = this;
var option = {
backgroundColor: "#fff",
graphic: [{
type: "group",
left: "center",
top: "68%",
children: [{
type: "text",
z: 100,
left: "10",
top: "middle",
style: {
fill: "#fff",
text: "今日得分",
font: "10px Microsoft YaHei",
},
}, ],
}, ],
series: [{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.1,
startAngle: ((270 + -angle) * Math.PI) / 180,
endAngle: ((40 + -angle) * Math.PI) / 180,
},
style: {
stroke: "#fd5361",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: "arc",
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2.1,
startAngle: ((90 + -angle) * Math.PI) / 180,
endAngle: ((220 + -angle) * Math.PI) / 180,
},
style: {
stroke: "#fd5361",
fill: "transparent",
lineWidth: 1.5,
},
silent: true,
};
},
data: [0],
},
{
name: "ring5",
type: "custom",
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;
let point = _that.getCirlPoint(x0, y0, r, 90 + -angle);
return {
type: "circle",
shape: {
cx: point.x,
cy: point.y,
r: 2,
},
style: {
stroke: "#fd5361", //粉
fill: "#fd5361",
},
};
},
data: [0],
},
{
name: "ring5", //绿点
type: "custom",
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2.1;
let point = _that.getCirlPoint(x0, y0, r, 270 + -angle);
return {
type: "circle",
shape: {
cx: point.x,
cy: point.y,
r: 2,
},
style: {
stroke: "#fd5361", //绿
fill: "#fd5361",
},
silent: true,
};
},
data: [0],
},
{
type: "liquidFill",
radius: "85%",
center: ["50%", "50%"],
color: ["#ff9c8f", "#ff7d6a", "#ff4e59"], //水波
data: options.value, // data个数代表波浪数
label: {
normal: {
formatter: function() {
return options.centerValue;
},
position: [40, 30],
color: "#ec2f3f",
insideColor: "#ec2f3f",
textStyle: {
fontSize: 46,
fontWeight: "bold",
fontFamily: "FZLTCHJW",
},
},
},
outline: {
borderDistance: 0,
itemStyle: {
isShow: true,
borderColor: "#ffecee",
borderWidth: 10,
// shadowBlur: 8,
shadowColor: "#ffecee",
},
},
itemStyle: {
opacity: 0.95,
shadowColor: "rgba(0, 0, 0, 0)",
},
backgroundStyle: {
borderWidth: 8,
borderColor: "#fedcde",
color: "#fedcde",
},
},
],
};
return option
},
}
}
</script>
<style lang="scss" scoped>
.customizate {
min-height: 100vh;
background-color: #EDEDED;
padding-bottom: 20rpx;
line-height: 1.8;
padding-top: 260rpx;
box-sizing: border-box;
/deep/uni-cover-view {
overflow: inherit !important;
}
/deep/.uni-progress-inner-bar {
border-radius: 15rpx;
}
/deep/.weektoggle {
display: none;
}
}
.customizate .fix {
position: fixed;
top: -150rpx;
left: 0px;
width: 100%;
z-index: 10000000;
}
.customizate .flex {
display: flex;
align-items: center;
}
.customizate .pd {
padding: 0px 30rpx;
box-sizing: border-box;
}
.customizate .mb {
margin-bottom: 20rpx;
}
.customizate .c_mainBg {
background-color: #FFFFFF;
}
.customizate .c_main1 {
width: 100%;
background-color: #C13636;
position: relative;
overflow: hidden;
padding-bottom: 50rpx;
box-sizing: border-box;
}
.customizate .c_main1 .head_bg {
position: absolute;
right: 0px;
top: 0px;
width: 252rpx;
height: 390rpx;
}
.customizate .c_main1 .head_list {
padding-top: 70rpx;
padding-bottom: 50rpx;
padding-left: 160rpx;
z-index: 10000;
}
.customizate .c_main1 .item {
font-size: 38rpx;
font-family: FZRUIZH_CUJW;
font-weight: normal;
font-style: italic;
color: #E98F8F;
margin: 0px 40rpx;
z-index: 10000;
line-height: 50rpx;
}
.customizate .c_main1 .item.active {
font-size: 36rpx;
font-family: SourceHanSansCN;
font-weight: bold;
font-style: normal;
color: #EDEDED;
position: relative;
text-shadow: 0rpx 2rpx 2rpx rgba(255, 234, 199, 0.75);
}
.customizate .c_main1 .item.active::after {
content: "";
width: 40rpx;
height: 6rpx;
display: inline-block;
background: #EDEDED;
border-radius: 6rpx;
position: absolute;
bottom: -12rpx;
left: 50%;
transform: translateX(-50%);
}
.customizate .c_main1 .vip {
width: 24rpx;
display: inline-block;
vertical-align: middle;
margin-left: 4rpx;
}
.customizate .c_main1 .info {
padding-bottom: 20rpx;
}
.customizate .c_main1 .info .people {
width: 94rpx;
height: 94rpx;
background: #FFFBF4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: inherit !important;
}
.customizate .c_main1 .info .people .head {
width: 50rpx;
height: auto;
}
.customizate .c_main1 .info .people .cut {
width: 30rpx;
height: 30rpx;
background: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0px;
right: -5rpx;
}
.customizate .c_main1 .info .people .cut .cut_img {
width: 18rpx;
}
.customizate .c_main1 .info .right {
padding-left: 34rpx;
color: #FFFFFF;
z-index: 10000;
flex: 1;
}
.customizate .c_main1 .info .right .top {
width: 100%;
margin-bottom: 10rpx;
justify-content: space-between;
}
.customizate .c_main1 .info .right .top .name {
font-size: 36rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #EDEDED;
}
.customizate .c_main1 .info .right .top .weather {
font-size: 30rpx;
font-family: SourceHanSansCN;
font-weight: 400;
color: #FDC2C2;
}
.customizate .c_main1 .info .right .bottom {
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: 400;
color: #EDEDED;
}
.customizate .c_main1 .info .right .bottom .down_icon {
width: 20rpx;
margin-left: 20rpx;
}
.customizate .c_main2 {
padding: 40rpx 20rpx 28rpx;
box-sizing: border-box;
}
.customizate .c_main2 .down {
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #7E6C6C;
text-align: center;
margin-top: 20rpx;
}
.customizate .calendar {
// height: 180rpx;
overflow: hidden;
}
.customizate .c_main2 .down .down_child {
display: inline-block;
}
.customizate .c_main2 .down image {
width: 25rpx;
}
.customizate .c_main2 .down .xz {
transform: rotateX(180deg);
}
.customizate .c_main3 {
padding: 0rpx 50rpx 32rpx 70rpx;
box-sizing: border-box;
}
.customizate .c_main3 .top .number {
font-size: 148rpx;
font-family: FZLTCHJW;
font-weight: bolder;
color: #5A0D0D;
margin-right: 40rpx;
}
.customizate .c_main3 .top .right .title {
font-size: 46rpx;
font-family: SourceHanSerifCN;
color: #5A0D0D;
margin-bottom: 20rpx;
font-weight: bold;
}
.customizate .c_main3 .top .right .r3_list {
justify-content: space-between;
}
.customizate .c_main3 .top .right .r3_item {
font-size: 35rpx;
font-family: SourceHanSansCN;
color: #7F6D6D;
}
.customizate .c_main3 .bottom {
justify-content: space-between;
}
.customizate .c_main3 .bottom .left .name {
font-size: 36rpx;
font-family: SourceHanSansCN;
color: #2A1601;
}
.customizate .c_main3 .bottom .left .day {
width: 78rpx;
height: 35rpx;
text-align: center;
line-height: 35rpx;
background: #FFF0F0;
border: 1px solid #F49696;
border-radius: 6rpx;
font-size: 20rpx;
font-family: SourceHanSansCN;
color: #2A1601;
margin-left: 12rpx;
}
.customizate .c_main3 .bottom .right {
flex: 1;
font-size: 26rpx;
font-family: SourceHanSansCN;
color: #7E6C6C;
text-align: right;
font-weight: bold;
}
.customizate .c_main3 .bottom .right .right_icon {
width: 9rpx;
margin-left: 20rpx;
}
.customizate .c_main4 {
padding-top: 35rpx;
padding-bottom: 35rpx;
justify-content: space-between;
}
.customizate .c_main4 .echart {
width: 200rpx;
height: 200rpx;
}
.customizate .c_main .com_title {
font-size: 40rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #5A0D0D;
position: relative;
padding-left: 40rpx;
font-weight: bold;
}
.customizate .c_main .com_title::after {
content: "";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
width: 10rpx;
height: 36rpx;
background: #5A0D0D;
border-radius: 5rpx;
}
.customizate .c_main4 .info {
margin-top: 50rpx;
}
.customizate .c_main4 .list {
flex: 1;
padding-left: 30rpx;
}
.customizate .c_main4 .list .item {
padding: 15rpx 0px;
box-sizing: border-box;
}
.customizate .c_main4 .list .item .name {
width: 70rpx;
font-size: 28rpx;
font-family: Alibaba;
color: #2B2B2B;
}
.customizate .c_main4 .list .item .tips {
width: 110rpx;
font-size: 26rpx;
font-family: Alibaba;
color: #E75C5B;
text-align: right;
}
.customizate .c_main4 .list .item .progressBox {
flex: 1;
background: #EDEDED;
border-radius: 15rpx;
position: relative;
}
.customizate .c_main4 .list .item .progressChild {
width: 100%;
overflow: hidden;
}
.customizate .c_main4 .list .item .p_icon {
border-color: #fff #fff #fff #fff;
border-top-color: #567AFF;
border-style: solid;
border-width: 12rpx 10rpx 0 10rpx;
height: 0;
width: 0;
position: absolute;
top: -12rpx;
transform: translateX(-50%);
}
.customizate .c_main5 {
padding-top: 32rpx;
padding-bottom: 30rpx;
}
.customizate .c_main5 .r_list {
margin-top: 14rpx
}
.customizate .c_main5 .r_list .r_item {
margin-top: 26rpx
}
.customizate .c_main5 .r_list .r_item .r_title {
width: 150rpx;
height: 48rpx;
line-height: 48rpx;
background: #516EFF;
border-radius: 24rpx 24rpx 24rpx 0rpx;
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #FFFFFF;
text-align: center;
margin-bottom: 14rpx;
}
.customizate .c_main5 .r_list .r_text {
font-size: 24rpx;
font-family: SourceHanSansCN;
color: #575656;
}
.customizate .c_main5 .r_listSimple {
height: 200rpx;
overflow: hidden;
position: relative;
}
.customizate .c_main5 .r_listSimple .r_bg {
height: 100rpx;
position: absolute;
width: 100%;
bottom: 0px;
left: 0px;
background-color: #fff;
box-shadow: 0px 0 30rpx 30rpx rgba(255, 255, 255, 1);
}
.customizate .c_main5 .r_listSimple .btnBox_postion {
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);
}
.customizate .c_main5 .r_listSimple .btnBox {
width: 460rpx;
height: 90rpx;
font-size: 36rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #000000;
text-align: center;
line-height: 90rpx;
}
.customizate .c_main5 .r_listSimple .btnBox .btn {
width: 100%;
}
.customizate .c_main5 .r_listSimple .btnBox .wz {
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
}
.customizate .c_main11 {
padding-top: 40rpx;
padding-bottom: 33rpx;
}
.customizate .c_main11 .com_title {
justify-content: space-between;
}
.customizate .c_main11 .com_title .more {
font-size: 30rpx;
font-family: SourceHanSansCN;
color: #7E6C6C
}
.customizate .c_main11 .com_title .more .rightIcon {
width: 15rpx;
margin-left: 15rpx;
}
.customizate .c_main11 .h_list {
margin-top: 57rpx;
background-color: #FFF6F6;
font-size: 26rpx;
font-family: SourceHanSansCN;
color: #856D6C;
}
.customizate .c_main11 .h_list .title {
width: 119rpx;
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #5A0D0D;
display: flex;
align-items: center;
padding: 20rpx 0px;
justify-content: center;
background: #FFEAEA;
}
.customizate .c_main11 .h_list .text {
padding: 20rpx 32rpx 20rpx;
}
/* 赠送版 */
.c_mainMember {
padding: 35rpx 30rpx;
box-sizing: border-box;
}
.c_mainMember {
padding-bottom: 75rpx;
}
.member_infoBox {
padding-top: 35rpx !important;
padding-bottom: 70rpx !important;
background-color: #fff;
}
.member_info {
justify-content: space-between;
width: 100%;
background: #EDDAB0;
border-radius: 16rpx;
padding: 15rpx 40rpx 15rpx 36rpx;
box-sizing: border-box;
margin-bottom: 35rpx;
}
.member_info .left .crown {
width: 36rpx;
margin-right: 20rpx;
}
.member_info .left .text {
font-size: 30rpx;
font-family: Alibaba;
color: #2A2016;
}
.member_info .btn {
width: 191rpx;
height: 59rpx;
text-align: center;
line-height: 59rpx;
background: linear-gradient(89deg, #BA842D, #DFA342);
border-radius: 30rpx;
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #FFFFFF;
}
.member_info1 {
width: 100%;
background: #FFF9EB;
border-radius: 20rpx;
padding: 35rpx 41rpx 0px;
box-sizing: border-box;
}
.member_info1 .title {
font-size: 32rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #565656;
text-align: center;
}
.member_info1 .title .point {
display: inline-block;
vertical-align: top;
color: #C21111;
}
.member_info1 .m_list {
justify-content: space-between;
margin-top: 40rpx;
text-align: center;
}
.member_info1 .m_list .m_item .exclusive_icon {
width: 96rpx;
display: inline-block;
margin-bottom: 17rpx;
}
.member_info1 .m_list .m_item .name {
font-size: 30rpx;
font-family: SourceHanSansCN;
color: #403F3F;
text-align: center;
}
.customizate .h_info {
height: 394rpx;
position: relative;
margin-top: 38rpx;
padding-top: 292rpx;
box-sizing: border-box;
}
.customizate .h_info .recomBtn {
width: 250rpx;
height: 51rpx;
background: #F2D8AB;
border-radius: 35rpx;
font-size: 31rpx;
font-family: Alibaba;
color: #773809;
text-align: right;
line-height: 51rpx;
padding-right: 34rpx;
margin-left: 120rpx;
}
.customizate .h_info .h_info_child {
position: absolute;
bottom: 0px;
align-items: flex-start;
}
.customizate .h_info .h_info_child .oldPerson {
width: 247rpx;
margin-right: 24rpx;
}
.customizate .h_info .h_info_child .personText {
width: 188rpx;
min-height: 260rpx;
background-image: url("data:image/png;base64,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
background-size: 100% 100%;
background-position: top left;
text-align: center;
padding: 25rpx 0px;
box-sizing: border-box;
}
.customizate .h_info .h_info_child .personText .personTit {
font-size: 32rpx;
font-family: Alibaba;
color: #773809;
}
.customizate .h_info .h_info_child .personText .personTip {
font-size: 24rpx;
font-family: Alibaba;
color: #773809;
display: inline-block;
}
.customizate .h_info .textBtn {
width: 460rpx;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
.c_mainMember1 {
padding-top: 40rpx !important;
padding-bottom: 38rpx !important;
}
.c_mainMember1 .s_table {
margin-top: 37rpx;
margin-bottom: 38rpx;
border: 1px solid #EDEDED;
border-bottom: 0px;
}
.c_mainMember1 .s_table .s_tableItem {
background-color: #FFEAEA;
border-bottom: 1px solid #EDEDED;
}
.c_mainMember1 .s_table .s_tableItem .title {
height: 100%;
font-size: 40rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #5A0D0D;
padding: 0px 26rpx;
}
.c_mainMember1 .s_table .s_tableItem .right {
flex: 1;
background-color: #fff;
}
.c_mainMember1 .s_tableItem .right .right_i1 {
padding-bottom: 20rpx;
}
.c_mainMember1 .s_tableItem .right .right_i1:first-child {
border-bottom: 1px solid #EDEDED;
}
.c_mainMember1 .s_table .right .right_list {
flex: 1;
}
.c_mainMember1 .s_table .textBtn {
width: 44rpx;
margin-left: 13rpx;
}
.c_mainMember1 .s_table .right_list {
padding: 0px 10rpx;
box-sizing: border-box;
flex-wrap: wrap;
}
.c_mainMember1 .s_table .right_list .right_item {
font-size: 26rpx;
font-family: SourceHanSansCN;
color: #7E6C6C;
width: 120rpx;
height: 55rpx;
line-height: 55rpx;
background: #E5E5E5;
border-radius: 6rpx;
margin: 12rpx;
text-align: center;
}
.c_mainMember1 .s_table .right_list .right_item1 {
background-color: #FFE4C9;
}
.c_mainMember1 .s_info {
width: 100%;
background: #EDDAB0;
border-radius: 74rpx;
justify-content: space-between;
padding-right: 16rpx;
box-sizing: border-box;
}
.c_mainMember1 .s_info .oldPersonHead {
width: 129rpx;
}
.c_mainMember1 .s_info .teacher_text .name {
font-size: 28rpx;
font-family: Alibaba;
color: #5A0D0D;
}
.c_mainMember1 .s_info .teacher_text .text {
font-size: 20rpx;
font-family: Alibaba;
color: #89582C;
display: inline-block;
}
.c_mainMember1 .s_info .btn {
width: 248rpx;
height: 66rpx;
background: linear-gradient(89deg, #BA842D, #DFA342);
border-radius: 33rpx;
font-size: 30rpx;
font-family: Alibaba;
color: #FFFFFF;
line-height: 66rpx;
text-align: center;
}
.c_mainMember2 .r_item {
position: relative;
margin-bottom: 20rpx;
height: 250rpx;
overflow: hidden;
}
.c_mainMember2 .r_item .r_bg {
height: 100rpx;
position: absolute;
width: 100%;
bottom: 0px;
left: 0px;
background-color: #fff;
box-shadow: 0px 0 60rpx 50rpx rgba(255, 255, 255, 1);
}
.c_mainMember2 .r_item .btnBox_postion {
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);
}
.c_mainMember2 .r_item .btnBox {
width: 495rpx;
height: 90rpx;
font-size: 36rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #000000;
text-align: center;
line-height: 90rpx;
}
.c_mainMember2 .r_item .btnBox .btn {
width: 100%;
}
.c_mainMember2 .r_item .btnBox .wz {
width: 100%;
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #000000;
}
.wx-progress-inner-bar {
border-radius: 15px;
}
.anima {
animation-name: likes;
animation-direction: alternate;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-duration: 1s;
}
@keyframes likes {
0% {
transform: scale(1);
}
25% {
transform: scale(0.9);
}
50% {
transform: scale(0.85);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
</style>