project/components/custommajor.vue

2307 lines
60 KiB
Vue
Raw Normal View History

2024-07-14 15:48:34 +08:00
<template>
<view class="custommajor" id="custommajor" :data="dateOptions" :change:data="echarts.getEchartData">
<!-- 头部 -->
<view class="fix">
<view class="c_main c_main1">
<view class="flex pd info">
<view class="people">
<image src="https://weiapi.youbeiw.top/images/customizate/head.png" mode="widthFix"
class="head"></image>
<!-- <image v-if="userInfo.sex == 1" src="https://weiapi.youbeiw.top/images/gvipicon.png" mode="widthFix" class="head"></image>
<image v-else src="https://weiapi.youbeiw.top/images/bvipicon.png" mode="widthFix" class="head"></image> -->
<view class="cut">
<image src="https://weiapi.youbeiw.top/images/customizate/cut.png" mode="widthFix"
class="cut_img"></image>
</view>
</view>
<view class="right">
<view class="flex top">
<view class="name" v-if="dateOptions">{{dateOptions.name}}{{currenttxt}}</view>
<view class="weather">已解锁黄历专业版</view>
</view>
<view class="flex bottom" v-if="dateOptions">
{{dateOptions.year}}{{dateOptions.month}}{{dateOptions.day}}
</view>
</view>
</view>
</view>
</view>
<!-- 日历 -->
<view class="c_main c_mainBg mb c_main2">
<view class="calendar">
<ren-calendar ref="ren" :open="false" :markDays="markDays" :headerBar='false'
@onDayClick='selectCalend'></ren-calendar>
</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" v-if="dateOptions">
<view class="flex top">
<view class="number">{{dateOptions.day}}</view>
<view class="right">
<view class="title">{{dateOptions.shengxiao}}年农历{{dateOptions.month1}}{{dateOptions.day1}}</view>
<view class="flex r3_list">
<view class="r3_item">{{dateOptions.year2}}</view>
<view class="r3_item">{{dateOptions.month2}}</view>
<view class="r3_item">{{dateOptions.day2}}</view>
</view>
</view>
</view>
<view class="flex bottom">
<view class="flex left">
<view class="name">{{dateOptions.jieqi == ""?"":dateOptions.jieqi}}</view>
<view class="day" v-if="dateOptions.jieqi == ''">无节气</view>
</view>
<view class="right">
{{dateOptions.jiyu[0]}}
</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="dispace_charts"></view>
<view class="list">
<view class="flex item">
<view class="name">综合</view>
<view class="progressBox">
<view class="progressChild">
<progress v-if="dateOptions" border-radius='15rpx' activeColor="#567AFF"
:percent="dateOptions.zh_fenshu" active stroke-width="8" class="progress" />
</view>
<view class="p_icon" v-if="dateOptions"
:style="`border-top-color:#567AFF;left: ${dateOptions.zh_fenshu}%;`">
</view>
</view>
<view class="tips" v-if="dateOptions&&dateOptions.zh_fenshu > 85">顺风顺水</view>
<view class="tips"
v-if="dateOptions&&dateOptions.zh_fenshu >= 80 && dateOptions.zh_fenshu <= 85">一帆风顺</view>
<view class="tips" v-if="dateOptions&&dateOptions.zh_fenshu <= 80">小心谨慎</view>
</view>
<view class="flex item">
<view class="name">感情</view>
<view class="progressBox">
<view class="progressChild">
<progress v-if="dateOptions" border-radius='15rpx' activeColor="#F35D6A"
:percent="dateOptions.gq_fenshu" active stroke-width="8" class="progress" />
</view>
<view class="p_icon" v-if="dateOptions"
:style="`border-top-color:#F35D6A;left: ${dateOptions.gq_fenshu}%;`">
</view>
</view>
<view class="tips" v-if="dateOptions&&dateOptions.zh_fenshu > 85">相亲相爱</view>
<view class="tips"
v-if="dateOptions&&dateOptions.zh_fenshu >= 80 && dateOptions.zh_fenshu <= 85">甜甜蜜蜜</view>
<view class="tips" v-if="dateOptions&&dateOptions.zh_fenshu <= 80">无悲无喜</view>
</view>
<view class="flex item">
<view class="name">财富</view>
<view class="progressBox">
<view class="progressChild">
<progress border-radius='15rpx' v-if="dateOptions" activeColor="#F3C05D"
:percent="dateOptions.cy_fenshu" active stroke-width="8" class="progress" />
</view>
<view class="p_icon" v-if="dateOptions"
:style="`border-top-color:#F3C05D;left: ${dateOptions.cy_fenshu}%;`">
</view>
</view>
<view class="tips" v-if="dateOptions&&dateOptions.zh_fenshu > 85">喜从天降</view>
<view class="tips"
v-if="dateOptions&&dateOptions.zh_fenshu >= 80 && dateOptions.zh_fenshu <= 85">贵人相助</view>
<view class="tips" v-if="dateOptions&&dateOptions.zh_fenshu <= 80">小心翼翼</view>
</view>
</view>
</view>
</view>
<!-- 今日师傅点评-专属版 -->
<view class="c_main c_mainBg pd mb c_main5">
<view class="com_title">今日点评</view>
<view class="r_list">
<view class="r_item">
<view class="r_title" style="background-color: #516EFF;">
今日感情
</view>
<view class="r_text" v-if="dateOptions">
{{dateOptions.aiqing}}
</view>
</view>
<view class="r_item">
<view class="r_title" style="background-color: #F64747;">
今日财富
</view>
<view class="r_text" v-if="dateOptions">
{{dateOptions.caiyu}}
</view>
</view>
<view class="r_item">
<view class="r_title" style="background-color: #6D6060;">
综合点评
</view>
<view class="r_text" v-if="dateOptions">
{{dateOptions.zonghe}}
</view>
</view>
</view>
</view>
<!-- 今日时辰凶吉-专属版 -->
<view class="c_main c_mainBg mb c_main6">
<view class="pd">
<view class="com_title">今日时辰状态</view>
</view>
<view class="o_info">
<view class="pd o_info1">
<image class="turntable" src="https://weiapi.youbeiw.top/images/customizate/turntable.png"
mode="widthFix"></image>
<view class="echart" id="turntable_charts"></view>
</view>
<template v-if="dateOptions">
<view class="title" v-for="(item,index) in dateOptions.times" :key="item.minHm"
v-if="dateOptions.timeZhi == item.zhi&&dateOptions.timeZhi!='子'">{{item.minHm}} -
{{item.maxHm}} {{dateOptions.timeZhi}}
</view>
<view class="title" v-if="dateOptions.timeZhi=='子'">23:00 - 00:59 子时</view>
</template>
<view class="flex pd o_list" v-if="dateOptions">
<view class="o_item" v-for="(item,index) in dateOptions.times" :key="item.minHm">
<view class="chron">{{item.zhi}}</view>
<view class="timeBox">
<view class="time">{{item.minHm}} - {{item.maxHm}}</view>
</view>
<view class="score3 score" v-if="item.tianShenLuck == '吉'">{{item.tianShenLuck}}</view>
<view class="score1 score" v-else>{{item.tianShenLuck}}</view>
</view>
</view>
<view class="echart1" id="turntable_charts1">
</view>
</view>
</view>
<!-- 今日穿衣搭配-专属版 -->
<view class="c_main c_mainBg mb pd c_main7">
<view class="com_title">今日穿衣搭配</view>
<view class="d_info">
<image class="person" v-if="dateOptions" :src="dateOptions.cyzs[cyactive].img" mode="widthFix">
</image>
<view class="wz">
<view class="name" v-if="dateOptions">
{{dateOptions.cyzs[cyactive].type}}{{dateOptions.cyzs[cyactive].key}}色衣服
</view>
<view class="wz_child" v-if="dateOptions">{{dateOptions.cyzs[cyactive].desc}}</view>
</view>
</view>
<view class="flex d_list" v-if="dateOptions">
<view class="d_item" :class="index == cyactive?'active':''" v-for="(item,index) in dateOptions.cyzs"
:key="index" :data-key="index" @click="click_cyzs">
<image class="p1" :src="item.img" mode="widthFix"></image>
<view class="d_icon">{{item.type}}</view>
<view class="d_title">{{item.key}}色衣服</view>
</view>
</view>
</view>
<!-- 今日饮食推荐-专属版 -->
<view class="c_main c_mainBg mb pd c_main8">
<view class="com_title">今日饮食推荐</view>
<view class="diet_list" v-if="dateOptions">
<view class="diet_Item">
<view class="d_title">水果</view>
<view class="d_listChild" v-for="(child,childId) in dateOptions.ystj.sg" :key="childId">
<view class="d_listChild_item">
<view class="flex left">
<image class="person"
:src="`https://weiapi.youbeiw.top/images/ys/${dateOptions.ystj.wh}/水果/${child}.png`"
mode="widthFix"></image>
<view class="fruits">{{child}}</view>
</view>
<view class="center">推荐</view>
<view class="right">
<view class="flex img_list">
<image class="person" v-for="(starNumber,index) in 5" :key="index"
src="https://weiapi.youbeiw.top/images/customizate/star.png" mode="widthFix">
</image>
</view>
<view class="starText">健康指数5</view>
</view>
</view>
</view>
</view>
<view class="diet_Item">
<view class="d_title">蔬菜</view>
<view class="d_listChild" v-for="(child,childId) in dateOptions.ystj.sc" :key="childId">
<view class="d_listChild_item">
<view class="flex left">
<image class="person"
:src="`https://weiapi.youbeiw.top/images/ys/${dateOptions.ystj.wh}/蔬菜/${child}.png`"
mode="widthFix"></image>
<view class="fruits">{{child}}</view>
</view>
<view class="center">推荐</view>
<view class="right">
<view class="flex img_list">
<image class="person" v-for="(starNumber,index) in 5" :key="index"
src="https://weiapi.youbeiw.top/images/customizate/star.png" mode="widthFix">
</image>
</view>
<view class="starText">健康指数5</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 未来30天运势-专属版 -->
<view class="c_main c_mainBg mb c_main9">
<view class="pd">
<view class="com_title">未来30天状态</view>
</view>
<view class="f_info">
<scroll-view scroll-x="true" scroll-y="false">
<view style="width: 2300rpx;">
<view class="flex f_list" v-if="dateOptions">
<view class="f_item" v-for="(item,index) in dateOptions.wl" :key="index">
<view class="name">{{item.xq}}</view>
<view class="date">{{item.month}}/{{item.dayOfMonth}}</view>
<view class="minute">{{item.fenshu}}</view>
</view>
</view>
<view class="echart" id="fortune_charts">
<!-- <ec-canvas id="fortune_charts" canvas-id="fortune_charts" force-use-old-canvas="true" ec="{{ ec_dispace_charts }}"></ec-canvas> -->
</view>
<view class="flex echart_label" v-if="dateOptions">
<view class="echart_item" :style="`background: ${item.color};`"
v-for="(item,index) in dateOptions.wl" :key="index">{{item.pf}}</view>
</view>
</view>
</scroll-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">
<view class="title">传统</view>
<view class="right">
<view class="flex right_i1">
<image class="textBtn" src="https://weiapi.youbeiw.top/images/customizate/icon1.png"
mode="widthFix"></image>
<view class="flex right_list" v-if="dateOptions">
<view class="right_item right_item1" v-for="(smallChild,index) in dateOptions.yi"
:key="index">{{smallChild}}</view>
</view>
</view>
<view class="flex right_i2">
<image class="textBtn" src="https://weiapi.youbeiw.top/images/customizate/icon2.png"
mode="widthFix"></image>
<view class="flex right_list" v-if="dateOptions">
<view class="right_item right_item2" v-for="(smallChild,index) in dateOptions.ji"
:key="index">{{smallChild}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 历史上的今天 -->
<view class="c_main c_mainBg pd c_main11">
<view class="flex com_title">
<view class="name">历史上的今天</view>
</view>
<view class="h_list" v-if="dateOptions">
<view class="flex h_item">
<view class="title">时间</view>
<view class="text">事件</view>
</view>
<view class="flex h_item" v-for="(item,index) in dateOptions.historyDayEvent" :key="index">
<view class="title">{{item.year}}</view>
<view class="text" v-html="item.title"></view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getOpenDayYuChengOpen
} from '@/api/home.js';
import {
login
} from '../utils/request';
import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
let angle = 0; //角度,用来做简单的动画效果的
export default {
data() {
return {
currenttxt: null,
cyactive: 0,
dateOptions: null,
currentTab: 1,
single: null,
curDate: '',
markDays: [],
weekMode: true,
// 今日时辰凶吉
fortuneEchartLabel: [{
color: '#724C26',
name: '差',
id: 1
}, {
color: '#DE8B07',
name: '良',
id: 2
}, {
color: '#724C26',
name: '差',
id: 3
}, {
color: '#DE8B07',
name: '良',
id: 4
}, {
color: '#DE8B07',
name: '良',
id: 5
}, {
color: '#DE8B07',
name: '良',
id: 6
}, {
color: '#DE8B07',
name: '良',
id: 7
}, {
color: '#724C26',
name: '差',
id: 8
}, {
color: '#724C26',
name: '差',
id: 9
}, {
color: '#DE8B07',
name: '良',
id: 10
}, {
color: '#724C26',
name: '差',
id: 11
}, {
color: '#DE8B07',
name: '良',
id: 12
}, {
color: '#DE8B07',
name: '良',
id: 13
}, {
color: '#DE8B07',
name: '良',
id: 14
}, {
color: '#DE8B07',
name: '良',
id: 15
}, {
color: '#724C26',
name: '差',
id: 16
}, {
color: '#724C26',
name: '差',
id: 17
}, {
color: '#DE8B07',
name: '良',
id: 18
}, {
color: '#724C26',
name: '差',
id: 19
}, {
color: '#DE8B07',
name: '良',
id: 20
}, {
color: '#DE8B07',
name: '良',
id: 21
}, {
color: '#DE8B07',
name: '良',
id: 22
}, {
color: '#DE8B07',
name: '良',
id: 23
}, {
color: '#724C26',
name: '差',
id: 24
}, {
color: '#724C26',
name: '差',
id: 25
}, {
color: '#DE8B07',
name: '良',
id: 26
}, {
color: '#724C26',
name: '差',
id: 27
}, {
color: '#DE8B07',
name: '良',
id: 28
}, {
color: '#DE8B07',
name: '良',
id: 29
}, {
color: '#DE8B07',
name: '良',
id: 30
}],
remarkFortuneList: [{
id: 1,
type: 1,
name: '综合-80%',
tips: '顺风顺水',
}, {
id: 2,
type: 2,
name: '感情-85%',
tips: '甜蜜无间',
}, {
id: 3,
type: 3,
name: '财运-60%',
tips: '有气无力',
}]
}
},
components: {
RenCalendar
},
created() {
var _that = this;
_that.getData()
},
mounted() {
var _that = this;
var now = new Date();
var currentHour = now.getHours();
var str = "";
if (currentHour >= 6 && currentHour < 11) {
// 白天
str = "早上好!"
} else if (currentHour >= 11 && currentHour < 13) {
str = "中午好!"
} else if (currentHour >= 13 && currentHour < 18) {
str = "下午好!"
} else {
// 夜晚
str = "晚上好!"
}
this.currenttxt = str;
},
methods: {
click_cyzs: function(e) {
this.cyactive = e.currentTarget.dataset.key
},
selectCalend(option) {
this.curDate = option.date;
},
onSwitchView() {
uni.switchTab({
url: '/pages/home/index'
})
},
getData(time) {
getOpenDayYuChengOpen({
openid: 'oEzDA69H2QoVPGz0aShIDtKzT2II',
}).then((res) => {
this.dateOptions = res;
this.single = res.date;
})
},
}
}
</script>
<script module="echarts" lang="renderjs">
import {
getOpenDayYuChengOpen
} from '@/api/home.js';
import * as echarts from 'echarts' // 引入ECharts库
import 'echarts-liquidfill'
let angle = 0; //角度,用来做简单的动画效果的
export default {
data() {
return {
// dateOptions:null,
chart0: null,
chart1: null,
chart2: null,
chart3: null,
chart4: null,
}
},
created() {},
mounted() {
// this.getEchartData();
},
methods: {
getEchartData(res) {
var _that = this;
_that.getzhdefen(res.zh_fenshu);
//今日时辰
var dispaceData1 = {
value: 30,
title: res.timeZhi,
}
_that.initCharts(1, document.getElementById('turntable_charts'), dispaceData1);
//未来30天运势
var dispaceData3 = {
xAxis: res.pf,
yAxis: res.fenshu
}
_that.initCharts(3, document.getElementById('fortune_charts'), dispaceData3);
var times = res.times;
var xAxis = [];
var yAxis = [];
var k = 0;
for (var i = 0; i < times.length; i++) {
if (i == 0) {
xAxis.push("0点");
} else {
k = k + 2;
xAxis.push((k) + "点");
}
if (times[i].tianShenLuck == "吉") {
yAxis.push(80);
} else {
yAxis.push(60);
}
}
//今日时辰折线图
var dispaceData2 = {
xAxis: xAxis,
yAxis: yAxis
}
_that.initCharts(2, document.getElementById('turntable_charts1'), dispaceData2);
},
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,
};
},
setOption(options) {
// 今日运程总分echart
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
},
setOption1(options) {
// 今日时辰凶吉echart
var _that = this;
var option = {
backgroundColor: "transparent",
title: [{
text: options.title,
left: "45%",
top: "45%",
textAlign: "center",
textBaseline: "middle",
textStyle: {
color: "#60452A",
fontWeight: "normal",
fontSize: 44,
fontWeight: 'bold',
},
},
{
text: "时",
left: "45%",
top: "76%",
textAlign: "center",
textBaseline: "middle",
textStyle: {
color: "#60452A",
fontWeight: "normal",
fontSize: 12,
},
},
],
series: [{
type: "pie",
clockWise: false,
radius: [47, 54],
itemStyle: {
normal: {
color: '#60452A',
shadowColor: '#60452A',
shadowBlur: 0,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
center: ["51%", "51%"],
data: [{
value: options.value,
},
{
value: 100 - options.value,
name: "invisible",
itemStyle: {
normal: {
color: "#C3BFBB",
},
emphasis: {
color: "#C3BFBB",
},
},
},
],
}],
};
return option
},
//今日时辰凶吉折线图
setOption2(options) {
var _that = this;
var option = {
grid: {
top: "15%",
bottom: "13%",
left: "12%",
right: "0%",
},
xAxis: {
type: "category",
data: options.xAxis,
axisLabel: {
margin: 10,
color: "#A6A6A6",
},
axisLine: {
show: true,
lineStyle: {
color: "#727272",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#EBEBEB",
type: "dashed",
},
},
},
yAxis: [{
type: "value",
position: "left",
min: 0,
axisLabel: {
margin: 10,
color: "#A6A6A6",
},
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: "#727272",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#EBEBEB",
type: "dashed",
},
},
}, ],
series: [{
type: "line",
smooth: true, //是否平滑
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#C13636", // 线条颜色
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#5A0D0D",
fontSize: '9px'
},
formatter: "{c}分",
},
itemStyle: {
color: "#C13636",
borderWidth: 5,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: "#f3d7d7",
},
{
offset: 1,
color: "#ffffff",
},
],
false
),
},
},
data: options.yAxis,
}],
};
return option
},
setOption3(options) {
// 未来30天运势
var _that = this;
var option = {
grid: {
top: "3%",
left: "1%",
right: "1%",
bottom: "1%",
},
xAxis: [{
type: "category",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
color: "#fff",
},
boundaryGap: false,
data: options.xAxis,
}, ],
yAxis: [{
type: "value",
min: 0,
// max: 140,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
}, ],
series: [{
type: "line",
smooth: true, //是否平滑
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
label: {
show: false,
},
itemStyle: {
color: "#C13636",
},
tooltip: {
show: false,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: "#f3d7d7",
},
{
offset: 1,
color: "#ffffff",
},
],
false
),
},
},
data: options.yAxis,
}],
};
return option
},
setOption4(options) {
// 本月运势点评
var _that = this;
var option = {
backgroundColor: "#fff",
title: [{
text: options.title,
left: "45%",
top: "40%",
textAlign: "center",
textBaseline: "middle",
textStyle: {
color: "#000",
fontWeight: "normal",
fontSize: 35,
fontWeight: 'bold',
},
},
{
text: "本月得分",
left: "45%",
top: "60%",
textAlign: "center",
textBaseline: "middle",
textStyle: {
color: "#333",
fontWeight: "normal",
fontSize: 12,
},
},
],
series: [{
type: "pie",
radius: [40, 70],
center: ["47%", "50%"],
data: [{
value: options.value[0],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#0556FE",
},
{
offset: 1,
color: "#4884FF",
},
]),
},
labelLine: {
show: false,
}
},
{
value: 100 - options.value[0],
itemStyle: {
color: "transparent",
},
},
],
},
{
type: "pie",
radius: [40, 60],
center: ["47%", "50%"],
data: [{
value: options.value[0],
itemStyle: {
color: "transparent",
},
},
{
value: options.value[1],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#FB6F44",
},
{
offset: 1,
color: "#FF8B68",
},
]),
},
labelLine: {
show: false,
}
},
{
value: options.value[2],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#F1D054",
},
{
offset: 1,
color: "#FFF772",
},
]),
},
labelLine: {
show: false,
}
},
],
}
],
};
return option
},
//今日综合得分
getzhdefen: function(fenshu) {
// 获取组件
var _that = this;
// 今日运程
angle = angle + 3;
var dispaceData = {
value: [0.5, 0.3, 0.4],
centerValue: fenshu,
}
_that.initCharts(0, document.getElementById('dispace_charts'), dispaceData);
setInterval(function() {
if (_that.chart0) {
angle = angle + 3;
_that.chart0.setOption(_that.setOption(dispaceData));
}
}, 100);
},
initCharts: function(type, element, value) {
// 获取组件的 canvas、width、height 后的回调函数
// 在这里初始化图表
var _that = this;
if (type === 0) {
_that.chart0 = echarts.init(element);
_that.chart0.setOption(_that.setOption(value));
}
if (type === 1) {
_that.chart1 = echarts.init(element);
_that.chart1.setOption(_that.setOption1(value));
}
if (type === 2) {
_that.chart2 = echarts.init(element);
_that.chart2.setOption(_that.setOption2(value));
}
if (type === 3) {
_that.chart3 = echarts.init(element);
_that.chart3.setOption(_that.setOption3(value));
}
if (type === 4) {
_that.chart4 = echarts.init(element);
_that.chart4.setOption(_that.setOption4(value));
}
},
}
}
</script>
<style lang="scss" scoped>
.custommajor {
min-height: 100vh;
background-color: #EDEDED;
padding-bottom: 20rpx;
line-height: 1.8;
// padding-top: 158rpx;
box-sizing: border-box;
/deep/uni-view {
overflow: inherit !important;
}
/deep/.uni-progress-inner-bar {
border-radius: 15rpx;
}
/deep/.weektoggle {
display: none;
}
}
.custommajor .flex {
display: flex;
align-items: center;
}
.custommajor .pd {
padding: 0px 30rpx;
box-sizing: border-box;
}
.custommajor .mb {
margin-bottom: 20rpx;
}
.custommajor .c_mainBg {
background-color: #FFFFFF;
}
.custommajor .c_main1 {
width: 100%;
background-color: #C13636;
position: relative;
overflow: hidden;
height: 200rpx;
padding-bottom: 43rpx;
z-index: 10000;
background-image: url("https://weiapi.youbeiw.top/images/customizate/head_bg.png");
background-size: 252rpx auto;
background-repeat: no-repeat;
background-position: top right;
}
.custommajor .c_main1 .head_bg {
position: absolute;
right: 0px;
top: 0px;
width: 252rpx;
height: 390rpx;
}
.custommajor .c_main1 .item {
font-size: 38rpx;
font-family: FZRUIZH_CUJW;
font-weight: normal;
font-style: italic;
color: #E98F8F;
margin: 0px 40rpx;
z-index: 10000;
}
.custommajor .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);
}
.custommajor .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%);
}
.custommajor .c_main1 .item .vip {
width: 24rpx;
display: inline-block;
vertical-align: middle;
margin-left: 4rpx;
}
.custommajor .c_main1 .info {
padding-bottom: 20rpx;
padding-top: 60rpx;
}
.custommajor .c_main1 .info .people {
width: 94rpx;
height: 94rpx;
background: #FFFBF4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.custommajor .c_main1 .info .people .head {
// width: 100%;
// height: auto;
width: 50rpx;
height: auto;
}
.custommajor .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: -9rpx;
}
.custommajor .c_main1 .info .people .cut .cut_img {
width: 18rpx;
}
.custommajor .c_main1 .info .right {
padding-left: 34rpx;
// padding-bottom: 40rpx;
color: #FFFFFF;
z-index: 10000;
flex: 1;
}
.custommajor .c_main1 .info .right .top {
width: 100%;
margin-bottom: 10rpx;
justify-content: space-between;
}
.custommajor .c_main1 .info .right .top .name {
font-size: 36rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #EDEDED;
}
.custommajor .c_main1 .info .right .top .weather {
font-size: 30rpx;
font-family: SourceHanSansCN;
font-weight: 400;
color: #FDC2C2;
}
.custommajor .c_main1 .info .right .bottom {
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: 400;
color: #EDEDED;
position: relative;
}
/deep/.uni-date-x {
background-color: transparent;
}
/deep/.uni-date-x--border {
border: transparent;
}
/deep/.uniui-calendar {
display: none;
}
/deep/.uni-date__x-input {
color: #fff;
}
/deep/.uni-calendar-item__weeks-box .uni-calendar-item--checked {
background-color: #C13636;
}
/deep/.uni-datetime-picker--btn {
background-color: #C13636;
}
.custommajor .c_main1 .info .right .bottom .down_icon {
// width: 20rpx;
// margin-left: 20rpx;
// position: absolute;
// top: 50%;
// transform: translateY(-50%);
// left: 150rpx;
width: 20rpx;
margin-left: 20rpx;
}
.custommajor .c_main2 {
// padding: 20rpx 20rpx 28rpx;
padding: 40rpx 40rpx 28rpx;
box-sizing: border-box;
}
.custommajor .c_main2 .down {
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #7E6C6C;
text-align: center;
margin-top: -10rpx;
}
// .customizate .calendar {
// height: 180rpx;
// overflow: hidden;
// }
.custommajor .c_main2 .down .down_child {
display: inline-block;
}
.custommajor .c_main2 .down image {
width: 25rpx;
}
.custommajor .c_main2 .down .xz {
transform: rotateX(180deg);
}
.custommajor .c_main3 {
padding: 0rpx 50rpx 32rpx 70rpx;
box-sizing: border-box;
}
.custommajor .c_main3 .top .number {
font-size: 148rpx;
font-family: FZLTCHJW;
font-weight: bolder;
color: #5A0D0D;
margin-right: 40rpx;
}
.custommajor .c_main3 .top .right .title {
font-size: 50rpx;
font-family: SourceHanSerifCN;
color: #5A0D0D;
margin-bottom: 20rpx;
font-weight: bold;
}
.custommajor .c_main3 .top .right .r3_list {
justify-content: space-between;
}
.custommajor .c_main3 .top .right .r3_item {
font-size: 35rpx;
font-family: SourceHanSansCN;
color: #7F6D6D;
}
.custommajor .c_main3 .bottom {
justify-content: space-between;
}
.custommajor .c_main3 .bottom .left .name {
font-size: 36rpx;
font-family: SourceHanSansCN;
color: #2A1601;
}
.custommajor .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;
}
.custommajor .c_main3 .bottom .right {
flex: 1;
font-size: 26rpx;
font-family: SourceHanSansCN;
color: #7E6C6C;
text-align: right;
font-weight: bold;
}
.custommajor .c_main3 .bottom .right .right_icon {
width: 9rpx;
margin-left: 20rpx;
}
.custommajor .c_main4 {
padding-top: 35rpx;
padding-bottom: 35rpx;
justify-content: space-between;
}
.custommajor .c_main4 .echart {
width: 200rpx;
height: 200rpx;
}
.custommajor .c_main .com_title {
font-size: 40rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #5A0D0D;
position: relative;
padding-left: 40rpx;
font-weight: bold;
}
.custommajor .c_main .com_title::after {
content: "";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
width: 10rpx;
height: 36rpx;
background: #5A0D0D;
border-radius: 5rpx;
}
.custommajor .c_main4 .info {
margin-top: 50rpx;
}
.custommajor .c_main4 .list {
flex: 1;
padding-left: 30rpx;
}
.custommajor .c_main4 .list .item {
padding: 15rpx 0px;
box-sizing: border-box;
}
.custommajor .c_main4 .list .item .name {
width: 70rpx;
font-size: 28rpx;
font-family: Alibaba;
color: #2B2B2B;
}
.custommajor .c_main4 .list .item .tips {
width: 110rpx;
font-size: 26rpx;
font-family: Alibaba;
color: #E75C5B;
text-align: right;
}
.custommajor .c_main4 .list .item .progressBox {
flex: 1;
background: #EDEDED;
border-radius: 15rpx;
position: relative;
}
.custommajor .c_main4 .list .item .progressChild {
width: 100%;
overflow: hidden;
}
.custommajor .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%);
}
.custommajor .c_main5 {
padding-top: 32rpx;
padding-bottom: 30rpx;
}
.custommajor .c_main5 .r_list {
margin-top: 14rpx
}
.custommajor .c_main5 .r_list .r_item {
margin-top: 26rpx
}
.custommajor .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;
}
.custommajor .c_main5 .r_list .r_text {
font-size: 24rpx;
font-family: SourceHanSansCN;
color: #575656;
}
.custommajor .c_main5 .r_listSimple {
height: 200rpx;
overflow: hidden;
position: relative;
}
.custommajor .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);
}
.custommajor .c_main5 .r_listSimple .btnBox_postion {
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);
}
.custommajor .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;
}
.custommajor .c_main5 .r_listSimple .btnBox .btn {
width: 100%;
}
.custommajor .c_main5 .r_listSimple .btnBox .wz {
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
}
.custommajor .c_main6 {
padding-top: 54rpx;
padding-bottom: 34rpx;
}
.custommajor .c_main6 .o_info {
margin-top: 32rpx;
}
.custommajor .c_main6 .o_info .o_info1 {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.custommajor .c_main6 .o_info .o_info1 .turntable {
width: 350rpx;
}
.custommajor .c_main6 .o_info .o_info1 .echart {
width: 210rpx;
height: 210rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 50%;
/* overflow: hidden; */
}
.custommajor .c_main6 .o_info .title {
font-size: 46rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #60452A;
text-align: center;
margin-top: -20rpx;
margin-bottom: 15rpx;
}
.custommajor .c_main6 .o_info .titleTips {
font-size: 24rpx;
font-family: SourceHanSansCN;
font-weight: 400;
color: #60452A;
text-align: center;
}
.custommajor .c_main6 .o_info .o_list {
justify-content: space-between;
margin-top: 15rpx;
}
.custommajor .c_main6 .o_info .o_list .o_item {
font-size: 24rpx;
font-family: SourceHanSansCN;
text-align: center;
}
.custommajor .c_main6 .o_info .o_list .o_item .chron {
color: #60452A;
}
.custommajor .c_main6 .o_info .o_list .o_item .timeBox {
width: 38rpx;
height: 180rpx;
margin: 12rpx 0px;
}
.custommajor .c_main6 .o_info .o_list .o_item .time {
color: #B3B3B3;
width: 180rpx;
height: 38rpx;
transform: rotate(90deg) translateY(38px) translateX(36px);
}
.custommajor .c_main6 .o_info .o_list .o_item .score {
font-size: 30rpx;
font-weight: bold;
color: #60452A;
margin: 0 auto;
}
.custommajor .c_main6 .o_info .o_list .o_item .score2 {
color: #DE8B07;
}
.custommajor .c_main6 .o_info .o_list .o_item .score3 {
color: #FFFFFF;
width: 44rpx;
height: 44rpx;
text-align: center;
line-height: 44rpx;
background: linear-gradient(0deg, #C13636, #E65A5A);
border: 1px solid #FBCEA2;
border-radius: 50%;
}
.custommajor .c_main6 .echart1 {
width: 100%;
height: 300rpx;
margin-top: 30rpx;
padding: 0px 30rpx 0px 10rpx;
box-sizing: border-box;
}
.custommajor .c_main7 {
padding-top: 40rpx;
}
.custommajor .c_main7 .d_info {
margin-top: 35rpx;
display: flex;
align-items: start;
padding: 0px 70rpx;
box-sizing: border-box;
}
.custommajor .c_main7 .d_info .person {
width: 207rpx;
height: auto;
}
.custommajor .c_main7 .d_info .wz {
min-height: 284rpx;
position: relative;
padding: 29rpx 22rpx 37rpx 54rpx;
box-sizing: border-box;
margin-top: 25rpx;
margin-left: 15rpx;
flex: 1;
background-image: url("data:image/png;base64,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");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: top left;
}
.custommajor .c_main7 .d_info .wz .name {
font-size: 32rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #5A0D0D;
margin-bottom: 18rpx;
}
.custommajor .c_main7 .d_info .wz .wz_child {
font-size: 24rpx;
font-family: SourceHanSansCN;
font-weight: 300;
color: #5A0D0D;
line-height: 1.6;
}
.custommajor .c_main7 .d_list {
justify-content: space-between;
margin-top: 26rpx;
padding-bottom: 30rpx;
}
.custommajor .c_main7 .d_list .d_item {
width: 195rpx;
height: 252rpx;
background: #fff;
border: 1px solid #EDEDED;
border-radius: 10rpx;
position: relative;
overflow: hidden !important;
}
.custommajor .c_main7 .d_list .d_item .p1 {
display: block;
width: 100%;
}
.custommajor .c_main7 .d_list .d_item .d_icon {
position: absolute;
left: 0;
top: 0;
/* width: 43rpx; */
min-width: 43rpx;
display: inline-block;
vertical-align: top;
height: 39rpx;
background: linear-gradient(0deg, #C13636, #E65A5A);
border-radius: 0px 0rpx 10rpx 0rpx;
font-size: 24rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #FFFFFF;
text-align: center;
/* line-height: 39rpx; */
}
.custommajor .c_main7 .d_list .d_item.active {
background: #FFF0F0;
border-color: #F49696;
}
.custommajor .c_main7 .d_list .d_item.active .d_title {
background: linear-gradient(0deg, #C13636, #E65A5A);
color: #fff;
}
.custommajor .c_main7 .d_list .d_item .d_title {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 53rpx;
text-align: center;
line-height: 53rpx;
background: #D7D7D7;
font-size: 30rpx;
font-family: SourceHanSansCN;
color: #777777;
}
.custommajor .c_main8 {
padding-top: 38rpx;
padding-bottom: 5rpx;
}
.custommajor .c_main8 .diet_list {
padding-top: 10rpx;
}
.custommajor .c_main8 .diet_Item .d_title {
font-size: 36rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #5A0D0D;
margin-bottom: 27rpx;
margin-top: 40rpx;
}
.custommajor .c_main8 .diet_Item .d_listChild_item {
width: 100%;
height: 159rpx;
background: #FFFAFA;
border: 1px solid #F49696;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 29rpx;
padding: 0px 30rpx;
box-sizing: border-box;
}
.custommajor .c_main8 .d_listChild_item .left .person {
width: 114rpx;
}
.custommajor .c_main8 .d_listChild_item .left .fruits {
flex: 1;
font-size: 36rpx;
font-family: SourceHanSansCN;
color: #5A0D0D;
margin-left: 36rpx;
width: 110rpx;
}
.custommajor .c_main8 .d_listChild_item .center {
width: 104rpx;
height: 40rpx;
background: #FFE4C9;
border-radius: 20rpx;
font-size: 28rpx;
text-align: center;
line-height: 40rpx;
font-family: SourceHanSansCN;
color: #724C26;
}
.custommajor .c_main8 .d_listChild_item .img_list .person {
width: 25rpx;
margin: 0px 3rpx 8rpx;
}
.custommajor .c_main8 .d_listChild_item .starText {
font-size: 24rpx;
font-family: SourceHanSansCN;
color: #5A0D0D;
}
.custommajor .c_main9 {
padding-top: 50rpx;
padding-bottom: 35rpx;
}
.custommajor .c_main9 .f_info {
width: 100%;
margin-top: 40rpx;
padding-left: 30rpx;
box-sizing: border-box;
// overflow: hidden;
overflow-x: auto;
}
.custommajor .c_main9 .f_info .f_list {
width: 100%;
justify-content: space-between;
}
.custommajor .c_main9 .f_info .f_item {
width: 60rpx;
text-align: center;
}
.custommajor .c_main9 .f_info .f_item .name {
font-size: 24rpx;
font-family: SourceHanSansCN;
color: #7E6C6C;
}
.custommajor .c_main9 .f_info .f_item .date {
font-size: 24rpx;
font-family: SourceHanSansCN;
color: #A6A6A6;
margin-top: 10rpx;
margin-bottom: 15rpx;
}
.custommajor .c_main9 .f_info .f_item .minute {
font-size: 24rpx;
font-family: SourceHanSansCN;
color: #F18A13;
}
.custommajor .c_main9 .echart {
width: 100%;
height: 200rpx;
margin-top: 25rpx;
}
.custommajor .c_main9 .echart_label {
// width: 100%;
width: 2300rpx;
justify-content: space-between;
}
.custommajor .c_main9 .echart_label .echart_item {
width: 55rpx;
height: 35rpx;
background: #724C26;
border-radius: 16rpx;
font-size: 24rpx;
font-family: SourceHanSansCN;
color: #FFFFFF;
text-align: center;
}
.custommajor .c_main10 {
padding-top: 53rpx;
padding-bottom: 44rpx;
}
.custommajor .c_main10 .r_info {
margin-top: 50rpx;
}
.custommajor .c_main10 .r_info .echart {
width: 320rpx;
height: 320rpx;
}
.custommajor .c_main10 .r_info .r_list {
flex: 1;
}
.custommajor .c_main10 .r_info .r_list .r_item {
margin: 15rpx 0px;
}
.custommajor .c_main10 .r_info .r_list .r_item .name {
font-size: 35rpx;
font-family: SourceHanSansCN;
font-weight: bold;
color: #383838;
margin-left: 26rpx;
margin-right: 32rpx;
}
.custommajor .c_main10 .r_info .r_list .r_item .tips {
font-size: 26rpx;
font-family: Alibaba;
color: #E75C5B;
}
.custommajor .c_main10 .r_info .r_list .r_item .label {
width: 26rpx;
height: 26rpx;
}
.custommajor .c_main10 .r_info .r_list .r_item .label1 {
background: linear-gradient(0deg, #0556FE, #4884FF);
}
.custommajor .c_main10 .r_info .r_list .r_item .label2 {
background: linear-gradient(0deg, #F1D054, #FFF772);
}
.custommajor .c_main10 .r_info .r_list .r_item .label3 {
background: linear-gradient(0deg, #FB6F44, #FF8B68);
}
.custommajor .c_main10 .textBox {
width: 100%;
min-height: 254rpx;
position: relative;
background-image: url(data:image/png;base64,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
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: top center;
z-index: 1000;
font-size: 28rpx;
font-family: SourceHanSansCN;
color: #000000;
padding: 58rpx 24rpx 28rpx 28rpx;
box-sizing: border-box;
line-height: 1.8;
margin-top: 8rpx;
}
.custommajor .c_main11 {
padding-top: 40rpx;
padding-bottom: 33rpx;
}
.custommajor .c_main11 .com_title {
justify-content: space-between;
}
.custommajor .c_main11 .com_title .more {
font-size: 30rpx;
font-family: SourceHanSansCN;
color: #7E6C6C
}
.custommajor .c_main11 .com_title .more .rightIcon {
width: 15rpx;
margin-left: 15rpx;
}
.custommajor .c_main11 .h_list {
margin-top: 57rpx;
background-color: #FFF6F6;
font-size: 28rpx;
font-family: SourceHanSansCN;
color: #856D6C;
}
.customizate .c_main11 .h_list .h_item {
border-bottom: 1px solid #fff;
}
.custommajor .c_main11 .h_list .title {
flex: 1;
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;
}
.custommajor .c_main11 .h_list .text {
flex: 4;
line-height: 1.2;
padding: 0 20rpx;
}
/* 赠送版 */
.c_mainMember1 {
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: 30rpx;
font-family: SourceHanSansCN;
color: #7E6C6C;
width: 135rpx;
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_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>