master
blak-kong
2 years ago
parent
9bbbf5daf6
commit
ffb1545314
@ -0,0 +1,473 @@
|
||||
/*.products_list, .main_wrapper_one {
|
||||
padding-bottom: 160rpx;
|
||||
}*/
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 110rpx;
|
||||
background: #fff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.tab {
|
||||
margin-right: 72rpx;
|
||||
}
|
||||
|
||||
.tab_active {
|
||||
position: relative;
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tabs .tab_active::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -12rpx;
|
||||
content: "";
|
||||
width: 80rpx;
|
||||
height: 4rpx;
|
||||
background: linear-gradient(-90deg, #ffe9c7, #eecda1);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
background: #f8f8f8;
|
||||
min-height: calc(100vh - 244rpx - env(safe-area-inset-bottom));
|
||||
text-align: center;
|
||||
}
|
||||
.main_wrapper_one {
|
||||
min-height: calc(100vh - 244rpx - env(safe-area-inset-bottom));
|
||||
/* height:calc(100vh - 156px - env(safe-area-inset-bottom)) */
|
||||
height: calc(100vh - 156px - calc(env(safe-area-inset-bottom)));
|
||||
padding-bottom: calc(env(safe-area-inset-bottom));
|
||||
}
|
||||
.main_wrapper_two {
|
||||
min-height: calc(100vh - 110rpx - env(safe-area-inset-bottom));
|
||||
height: calc(100vh - 32px - env(safe-area-inset-bottom));
|
||||
}
|
||||
.m-x-30 {
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.instrument_list {
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.products_list {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
white-space: nowrap;
|
||||
background: #f8f8f8;
|
||||
padding-top: 25rpx;
|
||||
padding-bottom: 29rpx;
|
||||
}
|
||||
|
||||
.all {
|
||||
display: inline-block;
|
||||
width: 120rpx;
|
||||
height: 70rpx;
|
||||
background: #eaeaea;
|
||||
border-radius: 35rpx;
|
||||
text-align: center;
|
||||
line-height: 70rpx;
|
||||
margin-left: 30rpx;
|
||||
color: #000000;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.products_item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: #eaeaea;
|
||||
border-radius: 35rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
padding-right: 23rpx;
|
||||
padding-left: 82rpx;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.products_item_active {
|
||||
background: linear-gradient(90deg, #efdcc2, #fff2df);
|
||||
}
|
||||
|
||||
.products_item:last-child {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.products_cover {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: -17rpx;
|
||||
top: -5rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.statistic {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/*height: 200rpx;*/
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
/*.statistic::after {*/
|
||||
/* position: absolute;*/
|
||||
/* left: 50%;*/
|
||||
/* transform: translateX(-50%);*/
|
||||
/* content: '';*/
|
||||
/* width: 1rpx;*/
|
||||
/* height: 90rpx;*/
|
||||
/* background: #DDDDDD;*/
|
||||
/*}*/
|
||||
|
||||
.statistic_item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.border {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1rpx;
|
||||
height: 90rpx;
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.statistic_num {
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.statistic_desc {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.instrument_item {
|
||||
margin-top: 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 30rpx;
|
||||
padding: 46rpx 36rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-right: 23rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
width: 90rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
background: #e5f9ee;
|
||||
border-radius: 18rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #57bc81;
|
||||
}
|
||||
|
||||
.tag_active {
|
||||
background: #f8f8f8;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.report_btn {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.arrow_icon {
|
||||
width: 10rpx;
|
||||
height: 20rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.instrument_middle {
|
||||
margin-top: 40rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.instrument_cover {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 37rpx;
|
||||
}
|
||||
|
||||
.instrument_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.instrument_title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
padding-top: 3rpx;
|
||||
}
|
||||
|
||||
.instrument_desc_box {
|
||||
margin-top: 25rpx;
|
||||
min-height: 73rpx;
|
||||
}
|
||||
|
||||
.instrument_desc {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.instrument_bottom {
|
||||
position: relative;
|
||||
margin-top: 28rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 20rpx;
|
||||
padding: 23rpx 0 23rpx;
|
||||
}
|
||||
|
||||
.place_item {
|
||||
flex: 1;
|
||||
border-right: 1rpx solid #dddd;
|
||||
}
|
||||
|
||||
.place_item:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.place {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.duration {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.plan_list {
|
||||
position: relative;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.plan_reward {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.plan_progress_bg {
|
||||
width: 200rpx;
|
||||
height: 14rpx;
|
||||
background: #f8f8f8;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plan_progress_bar {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #efdcc2, #fff2df);
|
||||
}
|
||||
|
||||
.plan_middle {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.border-p-t {
|
||||
border-top: 1rpx solid #f8f8f8;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
transition: 0.5s;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
|
||||
.clock_in_statistics {
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
/*margin-top: 30rpx;*/
|
||||
height: 383rpx;
|
||||
padding: 46rpx 36rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.clock_in_statistics_title {
|
||||
height: 31rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.clock_in_statistics_date {
|
||||
height: 21rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.chart {
|
||||
margin-top: 44rpx;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: 13rpx;
|
||||
height: 186rpx;
|
||||
background: linear-gradient(0deg, #efdcc2, #fff2df);
|
||||
border-radius: 7rpx;
|
||||
}
|
||||
|
||||
.buoy {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.month {
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.month_box {
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.month_statistics {
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 46rpx 36rpx;
|
||||
}
|
||||
|
||||
.more_icon {
|
||||
display: inline-block;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.more_text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.month_item {
|
||||
border-top: 1rpx solid #dddddd;
|
||||
padding: 37rpx 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.month_item_cover {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.month_item_date {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.month_item_note {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-top: 31rpx;
|
||||
}
|
||||
|
||||
.month_image_box {
|
||||
margin: 48rpx 0 50rpx;
|
||||
justify-content: start;
|
||||
}
|
||||
.month_image_box image {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.month_image_box image:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.clock_button_wrap {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 153rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
|
||||
}
|
||||
|
||||
.clock_button {
|
||||
width: 690rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
background: #000000;
|
||||
border-radius: 45rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 60vh;
|
||||
.empty-img {
|
||||
display: block;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.empty-text {
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "用户协议",
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
.nodes {
|
||||
padding: 30rpx;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
table {
|
||||
border-collapse: collapse; /* 边框合并 */
|
||||
}
|
||||
td {
|
||||
text-align: center; /* 字体居中 */
|
||||
border: 1px solid #ccc; /* 边框样式 */
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
import { Component, PropsWithChildren, useEffect, useState } from "react";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { Block, View, RichText } from "@tarojs/components";
|
||||
|
||||
import Navbar from "../../components/navbar/navbar";
|
||||
|
||||
import "./userPolicy.less";
|
||||
|
||||
import { getUserAgreement } from "../../utils/Interface";
|
||||
|
||||
export default class UserPolicy extends Component<any, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
name: "用户协议",
|
||||
nodes: "",
|
||||
};
|
||||
}
|
||||
|
||||
async onLoad() {
|
||||
this.initData();
|
||||
}
|
||||
componentDidMount() {}
|
||||
|
||||
componentWillUnmount() {}
|
||||
|
||||
componentDidShow() {}
|
||||
|
||||
componentDidHide() {}
|
||||
|
||||
initData = async () => {
|
||||
let res = await getUserAgreement();
|
||||
if (res.data.code === 200) {
|
||||
this.setState({ nodes: res.data.data.value });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
let { nodes } = this.state;
|
||||
return (
|
||||
<Block>
|
||||
<Navbar titleSlot="用户协议" isBack={true} />
|
||||
|
||||
<View className="nodes">
|
||||
<RichText
|
||||
nodes={
|
||||
nodes
|
||||
// "<pre style=' white-space: pre-wrap;word-wrap: break-word;'>" +
|
||||
// nodes +
|
||||
// "</pre>"
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue