ChronicDisease_UniApp/src/pages/doctor/manage/index.vue

<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>
        <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>
      </view>
    </view>
  </view>
  <TabBar />
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import CustomNav from '@/components/custom-nav.vue'
import TabBar from '@/components/tab-bar.vue'

// 如果在微信小程序端且未登录，自动跳转到登录页
onShow(() => {
  const token = uni.getStorageSync('token')
  if (!token) {
    uni.reLaunch({ url: '/pages/public/login/index' })
  }
})

function onItemClick(type: string) {
  uni.showToast({ title: `${type} 功能正在开发中`, icon: 'none' })
}
</script>

<style>
.page-container {
  min-height: 100vh;
  padding-top: calc(var(--status-bar-height) + 44px);
  padding-bottom: 100rpx;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.content {
  width: 100%;
}

.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;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0 10rpx;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.item-content {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  display: flex;
  flex-direction: column;
}

.title-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.item-line {
  width: 8rpx;
  height: 48rpx;
  margin-right: 15rpx;
  border-radius: 10rpx;
}

.blue .item-line {
  background-color: #3742fa;
}

.orange .item-line {
  background-color: #ffa502;
}

.green .item-line {
  background-color: #2ed573;
}

.item-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.item-desc {
  font-size: 28rpx;
  color: #666;
}
</style>