|
|
@@ -1,38 +1,22 @@
|
|
|
<template>
|
|
|
<CustomNav title="后台管理" leftType="home" />
|
|
|
- <view class="page-container">
|
|
|
- <view class="content">
|
|
|
- <view class="function-container">
|
|
|
- <view class="function-row">
|
|
|
- <view class="function-item blue" @click="onItemClick('资讯管理')">
|
|
|
- <view class="item-content">
|
|
|
- <view class="title-row">
|
|
|
- <view class="item-line"></view>
|
|
|
- <text class="item-title">资讯管理</text>
|
|
|
- </view>
|
|
|
- <text class="item-desc">管理病人看到的资讯</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="function-item orange" @click="onItemClick('快捷问题管理')">
|
|
|
- <view class="item-content">
|
|
|
- <view class="title-row">
|
|
|
- <view class="item-line"></view>
|
|
|
- <text class="item-title">快捷问题管理</text>
|
|
|
- </view>
|
|
|
- <text class="item-desc">管理快捷问题</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="menu-card">
|
|
|
+ <view class="menu-list">
|
|
|
+ <view class="menu-item" @click="onItemClick('健康资讯管理')">
|
|
|
+ <image src="/static/icons/remixicon/article-line.svg" class="menu-icon" mode="widthFix" />
|
|
|
+ <text class="menu-text">健康资讯管理</text>
|
|
|
+ <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
|
|
|
</view>
|
|
|
- <view class="function-row">
|
|
|
- <view class="function-item green" @click="onItemClick('药品信息管理')">
|
|
|
- <view class="item-content">
|
|
|
- <view class="title-row">
|
|
|
- <view class="item-line"></view>
|
|
|
- <text class="item-title">药品信息管理</text>
|
|
|
- </view>
|
|
|
- <text class="item-desc">管理药品信息</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="menu-item" @click="onItemClick('快捷问题管理')">
|
|
|
+ <image src="/static/icons/remixicon/question-line.svg" class="menu-icon" mode="widthFix" />
|
|
|
+ <text class="menu-text">快捷问题管理</text>
|
|
|
+ <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
|
|
|
+ </view>
|
|
|
+ <view class="menu-item" @click="onItemClick('药品信息管理')">
|
|
|
+ <image src="/static/icons/remixicon/capsule-fill.svg" class="menu-icon" mode="widthFix" />
|
|
|
+ <text class="menu-text">药品信息管理</text>
|
|
|
+ <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -58,88 +42,55 @@ function onItemClick(type: string) {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-.page-container {
|
|
|
- min-height: 100vh;
|
|
|
+<style scoped>
|
|
|
+.content {
|
|
|
padding-top: calc(var(--status-bar-height) + 44px);
|
|
|
- padding-bottom: 100rpx;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f5f5;
|
|
|
box-sizing: border-box;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
|
}
|
|
|
|
|
|
-.content {
|
|
|
- width: 100%;
|
|
|
+.menu-card {
|
|
|
+ padding: 50rpx 0rpx;
|
|
|
}
|
|
|
|
|
|
-.function-container {
|
|
|
- padding-inline: 20rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.function-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.function-row:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.function-item {
|
|
|
- flex: 1;
|
|
|
- height: 160rpx;
|
|
|
+.menu-list {
|
|
|
background-color: #fff;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin: 0 10rpx;
|
|
|
- position: relative;
|
|
|
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 12rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.item-content {
|
|
|
- position: absolute;
|
|
|
- top: 20rpx;
|
|
|
- left: 20rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.title-row {
|
|
|
+.menu-item {
|
|
|
display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.item-line {
|
|
|
- width: 8rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-right: 15rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.blue .item-line {
|
|
|
- background-color: #3742fa;
|
|
|
+ padding: 30rpx 40rpx;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
}
|
|
|
|
|
|
-.orange .item-line {
|
|
|
- background-color: #ffa502;
|
|
|
+.menu-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
|
|
|
|
-.green .item-line {
|
|
|
- background-color: #2ed573;
|
|
|
+.menu-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #000000;
|
|
|
+ flex: 1;
|
|
|
+ letter-spacing: 1rpx;
|
|
|
}
|
|
|
|
|
|
-.item-title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
+.menu-arrow {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
}
|
|
|
|
|
|
-.item-desc {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
+.menu-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
</style>
|