主要更新uniapp相关功能
This commit is contained in:
hero920103 committed
1 parent
aa92ca40a2
commit
5b4dbb2b46
65 files changed
+8532
-1921
No files matched your search
+42
-77
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 顶部信息：融入页面背景，不再单独做彩色抬头 -->
|
||||
<view class="head">
|
||||
<view class="head" :style="headPad">
|
||||
<view class="head-row">
|
||||
<text class="head-title">选择子系统</text>
|
||||
<text class="head-count">{{ enabledCount }}/{{ cards.length }} 已开通</text>
|
||||
@@ -20,28 +20,24 @@
|
||||
<FaIcon name="rotate" color="#f04438" :size="16" />
|
||||
</view>
|
||||
|
||||
<!-- 子系统宫格 -->
|
||||
<!-- 子系统分组卡：组内一行 4 个 -->
|
||||
<view v-else-if="!loading && cards.length === 0" class="empty-box">
|
||||
<FaIcon name="cube" color="#c0c4cc" :size="32" />
|
||||
<text class="empty-text">暂无子系统，请联系管理员开通</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="card-grid">
|
||||
<view v-else class="grid">
|
||||
<view
|
||||
v-for="card in cards"
|
||||
:key="card.code || card.id"
|
||||
class="sub-card"
|
||||
:class="{ locked: card.locked }"
|
||||
class="cell"
|
||||
@tap="enter(card)"
|
||||
>
|
||||
<view class="tint-icon sub-icon" :class="card.tint">
|
||||
<FaIcon :name="card.icon" color="#ffffff" :size="26" />
|
||||
</view>
|
||||
<text class="sub-name">{{ card.name }}</text>
|
||||
<text class="sub-desc">{{ card.desc }}</text>
|
||||
<view class="sub-go">
|
||||
<text class="sub-go-text">进入</text>
|
||||
<FaIcon name="arrow-right" color="#ffffff" :size="11" />
|
||||
<view class="portal-card" :class="{ locked: card.locked }">
|
||||
<view class="tint-icon portal-icon" :class="card.tint">
|
||||
<FaIcon :name="card.icon" color="#ffffff" :size="26" />
|
||||
</view>
|
||||
<text class="portal-name">{{ card.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -53,6 +49,9 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { mpHeadPad } from '@/utils/mpHead.js'
|
||||
|
||||
const headPad = mpHeadPad()
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { isLoggedIn } from '@/utils/auth.js'
|
||||
import { fetchHome } from '@/api/workspace.js'
|
||||
@@ -186,6 +185,10 @@ onShow(() => {
|
||||
.head {
|
||||
flex-shrink: 0;
|
||||
padding: calc(var(--status-bar-height, 44px) + 32rpx) $page-padding-x 12rpx;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
/* 小程序端 --status-bar-height 固定 25px，需真实状态栏(env)+胶囊避让 */
|
||||
padding-top: calc(env(safe-area-inset-top, 25px) + 96rpx);
|
||||
/* #endif */
|
||||
background: $color-bg-page;
|
||||
}
|
||||
|
||||
@@ -275,92 +278,54 @@ onShow(() => {
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
/* ============ 子系统宫格 ============
|
||||
用 flex 换行而不是 grid：小程序端 wxss 对 grid 的支持不稳定，
|
||||
用 flex-wrap + 百分比宽度才能保证任何屏宽都稳定两列，
|
||||
且同一行卡片高度自动拉齐（align-items 默认 stretch）。 */
|
||||
.card-grid {
|
||||
/* ============ 子系统门户宫格：一行 2 个，仅图标 + 名称 ============ */
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
margin-right: -20rpx;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
.sub-card {
|
||||
@include card;
|
||||
width: calc(50% - 10rpx);
|
||||
margin-right: 20rpx;
|
||||
.cell {
|
||||
width: 50%;
|
||||
padding-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 26rpx 22rpx 22rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.portal-card {
|
||||
@include card;
|
||||
padding: 40rpx 16rpx 34rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease;
|
||||
|
||||
/* 每行第 2 个不右边距，保证 50%-10rpx + 20rpx + 50%-10rpx = 100% */
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
transition: transform 0.15s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* 未开通：靠灰色图标与灰色文字表达，不使用角标 */
|
||||
&.locked {
|
||||
.sub-name,
|
||||
.sub-desc {
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.sub-go {
|
||||
background: $color-border;
|
||||
}
|
||||
|
||||
.sub-go-text {
|
||||
color: $color-text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-icon {
|
||||
@include tint-icon(88rpx, 24rpx);
|
||||
.portal-icon {
|
||||
@include tint-icon(108rpx, 28rpx);
|
||||
}
|
||||
|
||||
.sub-name {
|
||||
margin-top: 20rpx;
|
||||
font-size: 31rpx;
|
||||
.portal-name {
|
||||
max-width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5rpx;
|
||||
color: $color-text;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sub-desc {
|
||||
margin-top: 8rpx;
|
||||
/* 按钮用 margin-top:auto 吸底，这里保证内容短时也有最小间距 */
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 22rpx;
|
||||
/* 未开通：灰底图标 + 灰字，不做角标，保持门户的干净 */
|
||||
.portal-card.locked .portal-name {
|
||||
color: $color-text-muted;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 进入按钮：吸底 + 撑满宽度，同一行的卡片按钮位置自动对齐 */
|
||||
.sub-go {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
height: 58rpx;
|
||||
margin-top: auto;
|
||||
border-radius: $radius-md;
|
||||
background: $color-primary;
|
||||
}
|
||||
|
||||
.sub-go-text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
|
||||
Reference in new issue
Block a user