花开物业版本1.0
This commit is contained in:
wangyuxin
8
huakai-app/pages/index/index.vue
Normal file
8
huakai-app/pages/index/index.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
8
huakai-app/pages/login/login.vue
Normal file
8
huakai-app/pages/login/login.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
248
huakai-app/pages/navigation/navigation.vue
Normal file
248
huakai-app/pages/navigation/navigation.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<view class="guide-page">
|
||||
<view class="status-bar"></view>
|
||||
<!-- 引导内容滑动容器 -->
|
||||
<swiper
|
||||
class="guide-swiper"
|
||||
:current="currentStep"
|
||||
@change="handleSwiperChange"
|
||||
:disable-scroll="false"
|
||||
:indicator-dots="false"
|
||||
:mode="mode"
|
||||
>
|
||||
<!-- 便捷服务 -->
|
||||
<swiper-item>
|
||||
<view class="guide-item">
|
||||
<view class="guide-img">
|
||||
<image src="https://wuyeadmin.bugtc.com/images/guide1.png" mode="aspectFit" class="img-content"></image>
|
||||
</view>
|
||||
<view class="guide-text">
|
||||
<view class="guide-title">便捷服务</view>
|
||||
<view class="guide-subtitle">报修、缴费、预约</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<!-- 高效管理 -->
|
||||
<swiper-item>
|
||||
<view class="guide-item">
|
||||
<view class="guide-img">
|
||||
<image src="https://wuyeadmin.bugtc.com/images/guide2.png" mode="aspectFit" class="img-content"></image>
|
||||
</view>
|
||||
<view class="guide-text">
|
||||
<view class="guide-title">高效管理</view>
|
||||
<view class="guide-subtitle">自动化流程和智能设备</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
<!--安全保障 -->
|
||||
<swiper-item>
|
||||
<view class="guide-item">
|
||||
<view class="guide-img">
|
||||
<image src="https://wuyeadmin.bugtc.com/images/guide3.png" mode="aspectFit" class="img-content"></image>
|
||||
</view>
|
||||
<view class="guide-text">
|
||||
<view class="guide-title">安全保障</view>
|
||||
<view class="guide-subtitle">智能巡检和智慧访客</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 进度点 -->
|
||||
<view class="progress-dots">
|
||||
<view class="dot" :class="{ active: currentStep === 0 }"></view>
|
||||
<view class="dot" :class="{ active: currentStep === 1 }"></view>
|
||||
<view class="dot" :class="{ active: currentStep === 2 }"></view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="guide-btn-wrap">
|
||||
<button
|
||||
class="guide-btn"
|
||||
:class="{ primary: currentStep === 2 }"
|
||||
@click="handleBtnClick"
|
||||
>
|
||||
{{ currentStep === 2 ? '立即体验' : '下一步' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
// ========== 响应式数据 ==========
|
||||
// 当前引导步骤（0/1/2）
|
||||
const currentStep = ref(0);
|
||||
const mode = ref("default")
|
||||
|
||||
// ========== 方法 ==========
|
||||
// 滑动swiper切换步骤
|
||||
const handleSwiperChange = (e) => {
|
||||
currentStep.value = e.detail.current;
|
||||
};
|
||||
|
||||
// 点击按钮操作
|
||||
const handleBtnClick = () => {
|
||||
// 前两步：点击下一步切换
|
||||
if (currentStep.value < 2) {
|
||||
currentStep.value++;
|
||||
} else {
|
||||
// 立即体验，跳转首页
|
||||
// 1. 记录引导已完成
|
||||
uni.setStorageSync('hasShowGuide', true);
|
||||
// 2. 跳转首页
|
||||
uni.navigateTo({
|
||||
url: "/pageSubPack/loginSub/pwd-login"
|
||||
})
|
||||
// uni.switchTab({
|
||||
// url: '/pages/index/index'
|
||||
// });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面容器 */
|
||||
.guide-page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to bottom, #E2F0FF, #F6FAFF);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 状态栏 - 自适应设备状态栏高度 */
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 滑动容器 */
|
||||
.guide-swiper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 单个引导项 - 全屏自适应 */
|
||||
.guide-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 图片区域 - 自适应 */
|
||||
.guide-img {
|
||||
width: 80%;
|
||||
max-width: 600rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.img-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
/* 文字区域 */
|
||||
.guide-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 引导标题 */
|
||||
.guide-title {
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 引导副标题 */
|
||||
.guide-subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 进度点容器 */
|
||||
.progress-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 单个进度点 */
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: #ddd;
|
||||
margin: 0 8rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 激活的进度点 */
|
||||
.dot.active {
|
||||
background-color: #007aff;
|
||||
width: 28rpx;
|
||||
}
|
||||
|
||||
/* 按钮容器 */
|
||||
.guide-btn-wrap {
|
||||
width: 80%;
|
||||
max-width: 600rpx;
|
||||
margin-bottom: 80rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 引导按钮 */
|
||||
.guide-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 默认按钮样式（下一步） */
|
||||
.guide-btn:not(.primary) {
|
||||
background-color: #fff;
|
||||
color: #007aff;
|
||||
border: 2rpx solid #007aff;
|
||||
}
|
||||
|
||||
/* 主按钮样式（立即体验） */
|
||||
.guide-btn.primary {
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 按钮禁用态（可选） */
|
||||
.guide-btn:disabled {
|
||||
background-color: #ccc;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
482
huakai-app/pages/paymentIndex/paymentIndex.vue
Normal file
482
huakai-app/pages/paymentIndex/paymentIndex.vue
Normal file
@@ -0,0 +1,482 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view class="status-bar"></view>
|
||||
<!-- left-icon="left" @clickLeft="goBack" -->
|
||||
<uni-nav-bar title="生活缴费" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
<view class="topbox">
|
||||
<image class="titleImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payTitle.png"></image>
|
||||
<image class="payImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payImg.png"></image>
|
||||
</view>
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="container">
|
||||
<!-- 已缴费/欠费列表 -->
|
||||
<view class="bill-list" v-if="paymentList.length != 0">
|
||||
|
||||
<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
|
||||
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png"
|
||||
v-if="item.type=='水费'"></image>
|
||||
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
|
||||
v-if="item.type=='电费'"></image>
|
||||
<view class="bill-info">
|
||||
<view class="bill-title">{{item.type}}
|
||||
<view class="bill-status debt" v-if="item.balance<0">已欠费</view>
|
||||
</view>
|
||||
<view class="bill-desc">{{item.villageName+item.buildingName+item.fullAddress}}</view>
|
||||
</view>
|
||||
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 新增缴费区域 -->
|
||||
<view class="add-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">新增缴费</text>
|
||||
<text class="record-link" @click="goToRecord">缴费记录</text>
|
||||
</view>
|
||||
|
||||
<view class="grid-list">
|
||||
|
||||
<view class="grid-item" v-for="(item, index) in addList" :key="index" @click="goToAdd(item)">
|
||||
<view class="icon-box" :class="item.iconClass">
|
||||
<image class="iconStyle" :src="item.icon"></image>
|
||||
</view>
|
||||
<!-- <text class="item-name">{{ item.name +'费'}}</text> -->
|
||||
<text class="item-name">{{ item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 开启通知按钮 -->
|
||||
<!-- v-if="subscribeAuth !== 'accepted'" -->
|
||||
<!-- <view class="subscribe-btn" @click="requestSubscribeMessageClick">
|
||||
<text class="subscribe-btn-text">开启缴费通知</text>
|
||||
|
||||
</view> -->
|
||||
<!-- <button class="subscribe-btn" @tap="handleWaterElecSubscribe" open-type="subscribeMessage">
|
||||
开启订单状态通知
|
||||
</button> -->
|
||||
<view style="width: 100%;height: 30rpx;"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow,
|
||||
onReady,
|
||||
onReachBottom,
|
||||
onLoad,
|
||||
onUnload,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
import {
|
||||
getTopUpSelectByResident,
|
||||
getopenIdByCode,
|
||||
postInsertOpenId,
|
||||
postSubscribeAuth
|
||||
} from '/pageSubPack/api/apiSub.js'
|
||||
// 响应式数据
|
||||
const statusBarHeight = ref(20)
|
||||
// const subscribeAuth = ref(uni.getStorageSync('subscribeAuth') || '')
|
||||
|
||||
const paymentList = ref([
|
||||
// {
|
||||
// id: 1,
|
||||
// name: '物业费',
|
||||
// status: '已欠费',
|
||||
// address: '桂花园（别墅）2号楼2层',
|
||||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/property.png",
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: '暖气费',
|
||||
// status: '',
|
||||
// address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/heating.png",
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: '电表',
|
||||
// status: '已欠费',
|
||||
// address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png",
|
||||
// }
|
||||
])
|
||||
|
||||
const addList = ref([
|
||||
// {
|
||||
// name: "燃气",
|
||||
// type: "gas",
|
||||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/gas.png",
|
||||
// iconClass: "gas"
|
||||
// },
|
||||
{
|
||||
name: "水表",
|
||||
type: "water",
|
||||
icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/water.png",
|
||||
iconClass: "water"
|
||||
},
|
||||
// {
|
||||
// name: "物业",
|
||||
// type: "property",
|
||||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/property.png",
|
||||
// iconClass: "property"
|
||||
// },
|
||||
// {
|
||||
// name: "电表",
|
||||
// type: "electric",
|
||||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png",
|
||||
// iconClass: "electric"
|
||||
// },
|
||||
|
||||
// {
|
||||
// name: "车位",
|
||||
// type: "parking",
|
||||
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/parkingIcon.png",
|
||||
// iconClass: "parking"
|
||||
// }
|
||||
])
|
||||
|
||||
const postOpenId = async () => {
|
||||
// 获取 openid
|
||||
try {
|
||||
const loginRes = await wx.login()
|
||||
if (!loginRes.code) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
// 用 code 换 openid
|
||||
const openIdRes = await getopenIdByCode({
|
||||
code: loginRes.code
|
||||
})
|
||||
if (openIdRes.code !== 200 || !openIdRes.data) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '获取openid失败',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const openid = openIdRes.data
|
||||
uni.setStorageSync('openid', openid)
|
||||
|
||||
await postInsertOpenId({
|
||||
openid: uni.getStorageSync('openid'),
|
||||
residentUserId: uni.getStorageSync('userId')
|
||||
})
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: `${err}`,
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('列表接口报错：', err)
|
||||
}
|
||||
}
|
||||
onShow(() => {
|
||||
// 不再自动请求订阅消息，改为用户点击触发
|
||||
})
|
||||
// 生命周期
|
||||
onReady(() => {})
|
||||
|
||||
onLoad(() => {
|
||||
postOpenId()
|
||||
uni.hideTabBar({
|
||||
animation: false // 关闭动画，更稳定
|
||||
});
|
||||
getPayList()
|
||||
})
|
||||
|
||||
|
||||
const getPayList = async () => {
|
||||
// 防重复请求
|
||||
try {
|
||||
const res = await getTopUpSelectByResident({
|
||||
residentUserId: uni.getStorageSync('userId')
|
||||
})
|
||||
const data = res.data
|
||||
paymentList.value = data
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: `${err}`,
|
||||
icon: 'none'
|
||||
})
|
||||
console.error('列表接口报错：', err)
|
||||
} finally {
|
||||
|
||||
}
|
||||
}
|
||||
// 方法
|
||||
const goToBill = (item) => {
|
||||
uni.setStorageSync('arrearsPayment', item)
|
||||
// if (item.balance < 0) {
|
||||
// uni.redirectTo({
|
||||
// url: '/pageSubPack/payment-list/arrearsPayment'
|
||||
// })
|
||||
// } else {
|
||||
// uni.redirectTo({
|
||||
// url: '/pageSubPack/payment-list/noArrearsPayment'
|
||||
// })
|
||||
// }
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/arrearsPayment'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const goToRecord = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/paymentRecord'
|
||||
})
|
||||
}
|
||||
|
||||
const goToAdd = (type) => {
|
||||
if (type.name == '燃气' || type.name == '暖气') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/selectPaymentEntity'
|
||||
})
|
||||
} else if (type.name == '水表' || type.name == '电表') {
|
||||
uni.redirectTo({
|
||||
url: '/pageSubPack/payment-list/addHydropower'
|
||||
})
|
||||
}
|
||||
uni.setStorageSync('addPaymentType', type.name)
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
console.log(uni.getStorageSync('sourcePage'))
|
||||
if (uni.getStorageSync('sourcePage') == 'serviceIndex') {
|
||||
uni.switchTab({
|
||||
url: '/pages/serviceIndex/serviceIndex'
|
||||
})
|
||||
} else if (uni.getStorageSync('sourcePage') == 'index') {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
uni.removeStorageSync('sourcePage')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topbox {
|
||||
height: 150rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.titleImg {
|
||||
width: 262rpx;
|
||||
height: 74rpx;
|
||||
position: absolute;
|
||||
left: 40rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
.payImg {
|
||||
width: 349.97rpx;
|
||||
height: 313.57rpx;
|
||||
position: absolute;
|
||||
right: -80rpx;
|
||||
bottom: -140rpx;
|
||||
}
|
||||
|
||||
.container {}
|
||||
|
||||
.bill-list {
|
||||
margin-bottom: 40rpx;
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F6F9FE;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 20rpx 20rpx 0px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.bill-item:last-child {
|
||||
margin-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
width: calc(90% - 100rpx);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.billIcon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.bill-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bill-desc {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.bill-status {
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background-color: #E34D59;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-right: 4rpx solid #ccc;
|
||||
border-bottom: 4rpx solid #ccc;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.add-section {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.record-link {
|
||||
font-size: 28rpx;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 26rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(25% - 50rpx);
|
||||
background-color: #F6F9FE;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.subscribe-btn {
|
||||
margin-top: 20rpx;
|
||||
background-color: #1677ff;
|
||||
padding: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subscribe-btn-text {
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100vw;
|
||||
height: 46px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user