Browse Source

修复边栏菜单被覆盖的bug

Shinohara Haruna 6 months ago
parent
commit
e194ba47fe

+ 15 - 0
smsb-plus-ui/src/assets/styles/index.scss

@@ -194,6 +194,21 @@ aside {
   }
 }
 
+// 移除所有 el-card 的阴影
+.el-card {
+  box-shadow: none !important;
+}
+
+// 移除所有 el-card.is-hover-shadow 的 margin-top
+.el-card.is-hover-shadow {
+  margin-top: 0 !important;
+  // margin-bottom: 0 !important;
+}
+
+.mb-\[10px\] {
+  margin-bottom: 0 !important;
+}
+
 .link-type,
 .link-type:focus {
   color: #337ab7;

+ 4 - 0
smsb-plus-ui/src/assets/styles/sidebar.scss

@@ -1,4 +1,8 @@
 #app {
+  .sidebar-no-logo {
+    padding-top: 70px;
+    background: $base-menu-background;
+  }
   .main-container {
     height: 100%;
     transition: margin-left 0.28s;

+ 8 - 2
smsb-plus-ui/src/components/IconSelect/index.vue

@@ -8,7 +8,8 @@
 
     <el-popover shadow="none" :visible="visible" placement="bottom-end" trigger="click" :width="450">
       <template #reference>
-        <div class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]" @click="visible = !visible">
+        <div class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"
+          @click="visible = !visible">
           <i-ep-caret-top v-show="visible"></i-ep-caret-top>
           <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
         </div>
@@ -18,7 +19,8 @@
 
       <el-scrollbar height="w-[200px]">
         <ul class="icon-list">
-          <el-tooltip v-for="(iconName, index) in iconNames" :key="index" :content="iconName" placement="bottom" effect="light">
+          <el-tooltip v-for="(iconName, index) in iconNames" :key="index" :content="iconName" placement="bottom"
+            effect="light">
             <li :class="['icon-item', { active: modelValue == iconName }]" @click="selectedIcon(iconName)">
               <svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
             </li>
@@ -70,9 +72,11 @@ const selectedIcon = (iconName: string) => {
   max-height: calc(50vh - 100px) !important;
   overflow-y: auto;
 }
+
 .el-divider--horizontal {
   margin: 10px auto !important;
 }
+
 .icon-list {
   display: flex;
   flex-wrap: wrap;
@@ -89,6 +93,7 @@ const selectedIcon = (iconName: string) => {
     justify-items: center;
     align-items: center;
     border: 1px solid #ccc;
+
     &:hover {
       border-color: var(--el-color-primary);
       color: var(--el-color-primary);
@@ -96,6 +101,7 @@ const selectedIcon = (iconName: string) => {
       transform: scaleX(1.1);
     }
   }
+
   .active {
     border-color: var(--el-color-primary);
     color: var(--el-color-primary);

+ 2 - 2
smsb-plus-ui/src/layout/components/AppMain.vue

@@ -48,7 +48,7 @@ watch(
   overflow: hidden;
 }
 
-.fixed-header + .app-main {
+.fixed-header+.app-main {
   padding-top: 50px;
 }
 
@@ -58,7 +58,7 @@ watch(
     min-height: calc(100vh - 84px);
   }
 
-  .fixed-header + .app-main {
+  .fixed-header+.app-main {
     padding-top: 84px;
   }
 }

+ 8 - 6
smsb-plus-ui/src/layout/components/Settings/index.vue

@@ -7,10 +7,10 @@
         <img src="@/assets/images/dark.svg" alt="dark" />
         <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
           <i aria-label="图标: check" class="anticon anticon-check">
-            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
+            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true"
+              focusable="false" class>
               <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
             </svg>
           </i>
         </div>
@@ -19,10 +19,10 @@
         <img src="@/assets/images/light.svg" alt="light" />
         <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
           <i aria-label="图标: check" class="anticon anticon-check">
-            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
+            <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true"
+              focusable="false" class>
               <path
-                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
-              />
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
             </svg>
           </i>
         </div>
@@ -182,10 +182,12 @@ defineExpose({
   color: rgba(0, 0, 0, 0.85);
   line-height: 22px;
   font-weight: bold;
+
   .drawer-title {
     font-size: 14px;
   }
 }
+
 .setting-drawer-block-checbox {
   display: flex;
   justify-content: flex-start;

+ 0 - 1
smsb-plus-ui/src/layout/components/Sidebar/index.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import Logo from './Logo.vue';
 import SidebarItem from './SidebarItem.vue';
 import variables from '@/assets/styles/variables.module.scss';
 import useAppStore from '@/store/modules/app';

+ 2 - 8
smsb-plus-ui/src/views/smsb/dashboard/play.vue

@@ -11,14 +11,8 @@
             </el-radio-group>
           </el-col>
           <el-col :span="5" style="text-align: right">
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="margin-left: 10px; margin-right: 30px"
-            />
+            <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
+              end-placeholder="结束日期" style="margin-left: 10px; margin-right: 30px" />
           </el-col>
         </el-row>
       </el-card>

+ 16 - 32
smsb-plus-ui/src/views/smsb/dashboard/play_info.vue

@@ -37,13 +37,16 @@
             <el-button type="warning" plain icon="Download" @click="handleExport">报表导出</el-button>
           </el-form-item>
           <el-form-item label="" prop="sourceType">
-            <el-select v-model="queryParams.sourceType" style="width: 150px" placeholder="请选择类型" @change="getRecordList" clearable>
+            <el-select v-model="queryParams.sourceType" style="width: 150px" placeholder="请选择类型" @change="getRecordList"
+              clearable>
               <el-option v-for="dict in smsb_source_type" :key="dict.value" :label="dict.label" :value="dict.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="" prop="sourceTag">
-            <el-select v-model="queryParams.sourceTag" style="width: 150px" placeholder="请选择分类" @change="getRecordList" clearable>
-              <el-option v-for="dict in smsb_source_classify" :key="dict.value" :label="dict.label" :value="dict.value" />
+            <el-select v-model="queryParams.sourceTag" style="width: 150px" placeholder="请选择分类" @change="getRecordList"
+              clearable>
+              <el-option v-for="dict in smsb_source_classify" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
             </el-select>
           </el-form-item>
           <el-form-item label="" prop="dataRage" style="width: 250px">
@@ -55,25 +58,18 @@
               </el-radio-group>
             </el-col>
             <el-col :span="12" style="text-align: right">
-              <el-date-picker
-                :disabled="true"
-                v-model="dateRange"
-                type="daterange"
-                range-separator="-"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                style="margin-left: 10px; margin-right: 30px"
-              />
+              <el-date-picker :disabled="true" v-model="dateRange" type="daterange" range-separator="-"
+                start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left: 10px; margin-right: 30px" />
             </el-col>
           </el-form-item>
         </el-form>
       </el-card>
       <el-card style="margin-top: 10px">
         <el-table v-loading="loading" :data="playRecordList">
-          <el-table-column label="资源ID" align="left" prop="sourceId" width="250"/>
-          <el-table-column label="资源名称" align="left" prop="fileName" :show-overflow-tooltip="true"/>
-          <el-table-column label="播放次数" align="center" prop="playTimes" width="200"/>
-          <el-table-column label="播放时长" align="center" prop="playDuration" width="200"/>
+          <el-table-column label="资源ID" align="left" prop="sourceId" width="250" />
+          <el-table-column label="资源名称" align="left" prop="fileName" :show-overflow-tooltip="true" />
+          <el-table-column label="播放次数" align="center" prop="playTimes" width="200" />
+          <el-table-column label="播放时长" align="center" prop="playDuration" width="200" />
           <el-table-column label="分类" align="center" prop="fileTag" width="120">
             <template #default="scope">
               <dict-tag :options="smsb_source_classify" :value="scope.row.fileTag" />
@@ -93,13 +89,8 @@
           </el-table-column>
         </el-table>
 
-        <pagination
-          v-show="total > 0"
-          :total="total"
-          v-model:page="queryParams.pageNum"
-          v-model:limit="queryParams.pageSize"
-          @pagination="getRecordList"
-        />
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize" @pagination="getRecordList" />
       </el-card>
     </el-main>
   </el-container>
@@ -114,15 +105,8 @@
           </el-radio-group>
         </el-col>
         <el-col :span="8" style="text-align: right">
-          <el-date-picker
-            :disabled="true"
-            v-model="DDateRange"
-            type="daterange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            style="margin-left: 10px; margin-right: 30px"
-          />
+          <el-date-picker :disabled="true" v-model="DDateRange" type="daterange" range-separator="-"
+            start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left: 10px; margin-right: 30px" />
         </el-col>
       </el-row>
     </div>