Quellcode durchsuchen

feat(doctor): 重构后台管理页面UI布局

- 将原有的功能块布局替换为菜单卡片样式
- 使用图标和箭头优化菜单项视觉效果
- 添加健康资讯、快捷问题、药品信息三个管理入口
- 引入新的SVG图标资源提升界面美观度
- 调整样式结构使页面更符合移动端展示需求
mcbaiyun vor 1 Monat
Ursprung
Commit
1ce1dc7155

+ 46 - 95
src/pages/doctor/manage/index.vue

@@ -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>

+ 1 - 0
src/static/icons/remixicon/article-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="rgba(116,116,116,1)"><path d="M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM19 20V4H5V20H19ZM7 6H11V10H7V6ZM7 12H17V14H7V12ZM7 16H17V18H7V16ZM13 7H17V9H13V7Z"></path></svg>

+ 1 - 0
src/static/icons/remixicon/capsule-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="rgba(116,116,116,1)"><path d="M19.7786 4.22184C22.1217 6.56498 22.1217 10.364 19.7786 12.7071L17.6565 14.8277L12.7075 19.7782C10.3643 22.1213 6.56535 22.1213 4.2222 19.7782C1.87906 17.435 1.87906 13.6361 4.2222 11.2929L11.2933 4.22184C13.6364 1.87869 17.4354 1.87869 19.7786 4.22184ZM14.8288 14.8284L9.17195 9.17158L5.63642 12.7071C4.07432 14.2692 4.07432 16.8019 5.63642 18.364C7.19851 19.9261 9.73117 19.9261 11.2933 18.364L14.8288 14.8284Z"></path></svg>

+ 1 - 0
src/static/icons/remixicon/question-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="rgba(116,116,116,1)"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path></svg>