From d4d19af0a0f62142685ee7e0a74fa1cc9a392eaf Mon Sep 17 00:00:00 2001
From: zjwmiao <1723168479@qq.com>
Date: Mon, 28 Jul 2025 11:53:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=A8=E5=B1=80=E5=8F=8D=E9=A6=88?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   5 +-
 src/App.vue                                   |   2 +-
 src/assets/svg-icons/icon-question.svg        |   3 +
 src/assets/svg-icons/icon-smile.svg           |   1 +
 src/components/AppFeedback.vue                |  11 +-
 .../{ => globalFeedback}/GlobalFeedback.vue   | 172 +++++++++++-----
 src/components/globalFeedback/ScoreSlider.vue | 193 ++++++++++++++++++
 7 files changed, 330 insertions(+), 57 deletions(-)
 create mode 100644 src/assets/svg-icons/icon-question.svg
 create mode 100644 src/assets/svg-icons/icon-smile.svg
 rename src/components/{ => globalFeedback}/GlobalFeedback.vue (76%)
 create mode 100644 src/components/globalFeedback/ScoreSlider.vue

diff --git a/components.d.ts b/components.d.ts
index c14c509..1735872 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -40,21 +40,22 @@ declare module 'vue' {
     FilterItemSkeleton: typeof import('./src/components/skeleton/FilterItemSkeleton.vue')['default']
     FilterOrder: typeof import('./src/components/filter/FilterOrder.vue')['default']
     FilterRadio: typeof import('./src/components/filter/FilterRadio.vue')['default']
-    GlobalFeedback: typeof import('./src/components/GlobalFeedback.vue')['default']
+    GlobalFeedback: typeof import('./src/components/globalFeedback/GlobalFeedback.vue')['default']
     HeaderNav: typeof import('./src/components/header/HeaderNav.vue')['default']
     HeaderTheme: typeof import('./src/components/header/HeaderTheme.vue')['default']
     HomeSkeleton: typeof import('./src/components/skeleton/HomeSkeleton.vue')['default']
     MaintenanceDescription: typeof import('./src/components/detail/MaintenanceDescription.vue')['default']
+    NavTab: typeof import('./src/components/NavTab.vue')['default']
     OCardItem: typeof import('./src/components/OCardItem.vue')['default']
     OCardItemSkeleton: typeof import('./src/components/skeleton/OCardItemSkeleton.vue')['default']
     OCodeCopy: typeof import('./src/components/OCodeCopy.vue')['default']
     OCodeDown: typeof import('./src/components/OCodeDown.vue')['default']
     OTableItemNew: typeof import('./src/components/OTableItemNew.vue')['default']
-    Result404: typeof import('./src/components/Result404.vue')['default']
     ResultNoApp: typeof import('./src/components/ResultNoApp.vue')['default']
     ResultNotFound: typeof import('./src/components/ResultNotFound.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScoreSlider: typeof import('./src/components/globalFeedback/ScoreSlider.vue')['default']
     SearchFilter: typeof import('./src/components/search/SearchFilter.vue')['default']
     SearchRecommend: typeof import('./src/components/search/SearchRecommend.vue')['default']
     SearchTab: typeof import('./src/components/search/SearchTab.vue')['default']
diff --git a/src/App.vue b/src/App.vue
index 6ce7d3a..e1d6e4c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@ import { useLocale } from '@/composables/useLocale';
 
 import AppHeader from '@/components/header/AppHeader.vue';
 import AppFooter from '@/components/AppFooter.vue';
-import GlobalFeedback from './components/GlobalFeedback.vue';
+import GlobalFeedback from '@/components/globalFeedback/GlobalFeedback.vue';
 import CookieNotice from './components/CookieNotice.vue';
 
 const langStore = useLangStore();
diff --git a/src/assets/svg-icons/icon-question.svg b/src/assets/svg-icons/icon-question.svg
new file mode 100644
index 0000000..41e6954
--- /dev/null
+++ b/src/assets/svg-icons/icon-question.svg
@@ -0,0 +1,3 @@
+<svg width="22.000000" height="22.000000" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<path id="形状" d="M13.7106 2.46387C12.8412 2.18805 11.9298 2.04608 11 2.04608C6.05482 2.04608 2.04596 6.05493 2.04596 11.0001C2.04596 15.9453 6.05482 19.9542 11 19.9542C15.9452 19.9542 19.954 15.9453 19.954 11.0001C19.954 8.13403 18.5974 5.49255 16.342 3.81348C16.0577 3.60187 15.6557 3.66077 15.4441 3.94501C15.2325 4.22931 15.2914 4.63129 15.5756 4.8429C17.5091 6.28229 18.6707 8.54395 18.6707 11.0001C18.6707 15.2365 15.2364 18.6708 11 18.6708C6.76358 18.6708 3.3293 15.2365 3.3293 11.0001C3.3293 6.76373 6.76358 3.32941 11 3.32941C11.7977 3.32941 12.5782 3.45099 13.3225 3.68713C13.6603 3.79431 14.021 3.60736 14.1282 3.26959C14.2354 2.93176 14.0484 2.57104 13.7106 2.46387ZM14.7508 9.29761C14.7508 7.33649 13.1609 5.74664 11.1998 5.74664C9.23863 5.74664 7.6488 7.33649 7.6488 9.29761C7.6488 9.65198 7.93608 9.93927 8.29047 9.93927C8.64485 9.93927 8.93213 9.65198 8.93213 9.29761C8.93213 8.04523 9.9474 7.02997 11.1998 7.02997C12.4522 7.02997 13.4675 8.04523 13.4675 9.29761C13.4675 10.4264 12.6372 11.3793 11.5322 11.5412C10.7765 11.7187 10.3104 12.4674 10.3104 13.1284L10.3104 13.8829L10.3162 13.97C10.3587 14.2832 10.6272 14.5246 10.952 14.5246C11.3064 14.5246 11.5937 14.2373 11.5937 13.8829L11.5937 13.1284L11.6007 13.0744C11.6277 12.9594 11.7254 12.8118 11.774 12.8002C13.4513 12.557 14.7508 11.0656 14.7508 9.29761ZM11 14.9049C11.5738 14.9049 12.039 15.3701 12.039 15.944C12.039 16.5178 11.5738 16.983 11 16.983C10.4261 16.983 9.96094 16.5178 9.96094 15.944C9.96094 15.3701 10.4261 14.9049 11 14.9049Z" clip-rule="evenodd" fill="currentColor" fill-opacity="0.800000" fill-rule="evenodd"/>
+</svg>
diff --git a/src/assets/svg-icons/icon-smile.svg b/src/assets/svg-icons/icon-smile.svg
new file mode 100644
index 0000000..12ec2f4
--- /dev/null
+++ b/src/assets/svg-icons/icon-smile.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path opacity="0.8" fill="currentColor" d="M12 2.3c5.357 0 9.7 4.343 9.7 9.7 0 2.436-0.902 4.732-2.502 6.503-1.827 2.021-4.419 3.197-7.198 3.197-5.357 0-9.7-4.343-9.7-9.7s4.343-9.7 9.7-9.7zM12 3.7c-4.584 0-8.3 3.716-8.3 8.3s3.716 8.3 8.3 8.3c2.379 0 4.595-1.005 6.159-2.736 1.37-1.515 2.141-3.479 2.141-5.564 0-4.584-3.716-8.3-8.3-8.3zM17.326 13.329c0.342 0.18 0.474 0.603 0.294 0.945-1.082 2.057-3.236 3.374-5.626 3.374-2.378 0-4.524-1.305-5.611-3.346-0.182-0.341-0.052-0.765 0.289-0.947s0.765-0.052 0.947 0.289c0.845 1.587 2.517 2.604 4.375 2.604 1.867 0 3.546-1.027 4.387-2.626 0.18-0.342 0.603-0.474 0.945-0.294zM7.25 8c0.69 0 1.25 0.56 1.25 1.25s-0.56 1.25-1.25 1.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25zM16.75 8c0.69 0 1.25 0.56 1.25 1.25s-0.56 1.25-1.25 1.25c-0.69 0-1.25-0.56-1.25-1.25s0.56-1.25 1.25-1.25z"></path></svg>
\ No newline at end of file
diff --git a/src/components/AppFeedback.vue b/src/components/AppFeedback.vue
index 1a436e5..10cc32a 100644
--- a/src/components/AppFeedback.vue
+++ b/src/components/AppFeedback.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { ORate, OTextarea, useMessage, OIcon, OButton, ODivider, OPopover } from '@opensig/opendesign';
+import { OTextarea, useMessage, OIcon, OButton, ODivider, OPopover } from '@opensig/opendesign';
 import { GITEE } from '@/data/config';
 import { useI18n } from 'vue-i18n';
 import { OPENEULER_FORUM } from '@/data/config';
@@ -13,6 +13,7 @@ import AppSection from '@/components/AppSection.vue';
 import IconHelpTips from '~icons/app/icon-help.svg';
 import FeedbackHistory from '@/components/feedbackHistory/FeedbackHistory.vue';
 import { useDebounceFn } from '@vueuse/core';
+import ScoreSlider from './globalFeedback/ScoreSlider.vue';
 
 const props = defineProps({
   name: {
@@ -197,7 +198,7 @@ const onChangeHistoryCategory = (val: string) => {
   <AppSection :title="t('software.feedbackTitle')" class="feedback">
     <div class="feedback-content">
       <div class="rate-box">
-        <ORate @change="onRateChange" v-model="rateVal" color="danger" size="large" />
+        <ScoreSlider @change="onRateChange" v-model="rateVal" />
       </div>
       <div class="feedback-from">
         <OTextarea
@@ -241,6 +242,12 @@ const onChangeHistoryCategory = (val: string) => {
 </template>
 
 <style lang="scss" scoped>
+.feedback :deep(.title-bar) {
+  margin-bottom: 0;
+}
+.rate-box {
+  padding-bottom: 20px
+}
 .popover-content {
   @include text1;
 }
diff --git a/src/components/GlobalFeedback.vue b/src/components/globalFeedback/GlobalFeedback.vue
similarity index 76%
rename from src/components/GlobalFeedback.vue
rename to src/components/globalFeedback/GlobalFeedback.vue
index 1945f6c..e23ff06 100644
--- a/src/components/GlobalFeedback.vue
+++ b/src/components/globalFeedback/GlobalFeedback.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { ref, computed, onUnmounted, onMounted, watch } from 'vue';
+import { ref, computed, onUnmounted, onMounted, watch, type CSSProperties } from 'vue';
 import {
   OButton,
   ODivider,
   OIcon,
-  OIconClose,
   OLink,
   OOption,
   OPopover,
   OPopup,
-  ORate,
   OScroller,
   OSelect,
   OTag,
@@ -21,16 +19,18 @@ import type { FeedbackHistoryT } from '@/@types/feedback';
 import { getGlobalFeedbackHistoryList, postGlobalFeedback } from '@/api/api-feedback';
 import { dayjs } from 'element-plus';
 
-import iconButton from '~icons/app/icon-feedback.svg';
-import Error404Result from './Error404Result.vue';
+import IconClose from '~icons/app/icon-close.svg';
+import Error404Result from '@/components/Error404Result.vue';
 import { useLoginStore } from '@/stores/user';
 import { useI18n } from 'vue-i18n';
 import { doLogin } from '@/shared/login';
 import IconLoading from '~icons/app/icon-loading.svg';
-import IconHelp from '~icons/app/icon-help.svg';
+import IconHelp from '~icons/app/icon-question.svg';
+import IconSmile from '~icons/app/icon-smile.svg';
 import { useRoute } from 'vue-router';
-import { onClickOutside, useDebounceFn } from '@vueuse/core';
+import { createReusableTemplate, onClickOutside, useDebounceFn } from '@vueuse/core';
 import { oaReport } from '@/shared/analytics';
+import ScoreSlider from './ScoreSlider.vue';
 
 const FEEDBACK_REGEXP = /(.*?)4. 【用户名】.*$/;
 const REPLACE_REGEXP = /\r|\n/g;
@@ -51,14 +51,28 @@ const isDetailPage = computed(() => {
 });
 
 const isShowingFeedbackList = ref(false);
-const feedbackTitle = computed(() => (isShowingFeedbackList.value ? '历史反馈信息' : '反馈'));
 const bottomLinkContent = computed(() => (isShowingFeedbackList.value ? '提交反馈' : '查看历史反馈信息'));
-
 const rateVal = ref(0);
 const feedbackContent = ref('');
-
 const popupVisible = ref(false);
 
+const feedbackBtnColor = computed<CSSProperties>(() => {
+  if (popupVisible.value) {
+    return { color: 'var(--o-color-primary1)' };
+  }
+  return {};
+})
+
+const placeholder = computed(() => {
+  if (rateVal.value < 7) {
+    return '请输入您不太满意的原因';
+  } else if (rateVal.value < 9) {
+    return '改进哪些方面会让您更满意？';
+  } else {
+    return '请输入您满意的原因';
+  }
+});
+
 const reportAnalytics = (data: Record<string, any>, event = 'click') => {
   oaReport(event, {
     module: 'global_feedback',
@@ -136,21 +150,19 @@ const vMounted = {
 
 let canvasCtx: CanvasRenderingContext2D;
 // 计算文本长度，决定是否显示省略号
-const vCalcTextLength = {
-  mounted(el: HTMLParagraphElement) {
-    const text = el.childNodes[0]?.textContent as string;
-    if (!canvasCtx) {
-      canvasCtx = document.createElement('canvas').getContext('2d') as CanvasRenderingContext2D;
-      canvasCtx.font = window.getComputedStyle(el).getPropertyValue('font');
-    }
-    const textLen = canvasCtx.measureText(text).width;
-    const containerWidth = el.getBoundingClientRect().width;
-    const tagWidth = el.querySelector('.o-tag')?.getBoundingClientRect().width as number;
-    if (textLen >= containerWidth * 4 - tagWidth) {
-      (el.querySelector('.dots-tag') as HTMLSpanElement).style.position = 'absolute';
-      (el.querySelector('.dots') as HTMLSpanElement).style.display = 'inline-block';
-    }
-  },
+const vCalcTextLength = (el: HTMLElement) => {
+  const text = el.childNodes[0]?.textContent as string;
+  if (!canvasCtx) {
+    canvasCtx = document.createElement('canvas').getContext('2d')!;
+    canvasCtx.font = window.getComputedStyle(el).getPropertyValue('font');
+  }
+  const textLen = canvasCtx.measureText(text).width;
+  const containerWidth = el.getBoundingClientRect().width;
+  const tagWidth = el.querySelector('.o-tag')?.getBoundingClientRect().width as number;
+  if (textLen >= containerWidth * 4 - tagWidth) {
+    (el.querySelector('.dots-tag') as HTMLSpanElement).style.position = 'absolute';
+    (el.querySelector('.dots') as HTMLSpanElement).style.display = 'inline-block';
+  }
 };
 
 const feedbacks = ref<FeedbackHistoryT[]>([]);
@@ -210,12 +222,14 @@ const onClickSwitch = async () => {
   }
 };
 
-const postFeedback = () => {
-  if (!loginStore.isLogined) {
-    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ rate: rateVal.value ?? 0, content: feedbackContent.value ?? '' }));
-    doLogin();
-    return;
+const goToLogin = () => {
+  if (rateVal.value && feedbackContent.value.trim()) {
+    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ rate: rateVal.value, content: feedbackContent.value }));
   }
+  doLogin();
+}
+
+const postFeedback = () => {
   if (!rateVal.value) {
     return message.warning({
       content: t('software.feedbackMessage[1]'),
@@ -247,43 +261,55 @@ const onClick = () => {
 };
 
 onUnmounted(() => window.sessionStorage.removeItem(STORAGE_KEY));
+
+const [DefinePopupHint, ReuseablePopupHint] = createReusableTemplate();
 </script>
 
 <template>
+  <DefinePopupHint>
+    <OPopover :wrapper="popupBodyRef">
+      <template #target>
+        <OIcon class="help-icon"><IconHelp /></OIcon>
+      </template>
+      <p style="max-width: 170px; word-break: break-all">历史反馈信息内容更新有延迟，请耐心等待</p>
+    </OPopover>
+  </DefinePopupHint>
+
   <Teleport to="body">
     <div
       class="global-feedback-btn"
       v-if="!isDetailPage"
       @click="onClick"
-      :style="{ color: popupVisible ? 'var(--o-color-primary1)' : 'var(--o-color-control3)' }"
+      :style="feedbackBtnColor"
     >
-      <iconButton />
+      <IconSmile />
       <div class="popup-target" ref="popupTargetRef"></div>
       <OPopup :target="popupTargetRef" v-model:visible="popupVisible" body-class="global-feedback-popup" trigger="none" position="lb">
         <div ref="popupBodyRef" class="global-feedback">
-          <OIconClose class="close-icon" @click="onClickCloseIcon" />
-          <p class="title">
-            {{ feedbackTitle }}
-            <OPopover>
-              <template #target>
-                <OIcon v-show="isShowingFeedbackList" class="help-icon"><IconHelp /></OIcon>
-              </template>
-              <p style="max-width: 170px; word-break: break-all">历史反馈信息内容更新有延迟，请耐心等待</p>
-            </OPopover>
-          </p>
+          <OIcon class="close-icon">
+            <IconClose @click="onClickCloseIcon" />
+          </OIcon>
+          <div class="title">
+            <span v-if="!isShowingFeedbackList">
+              您对
+              <span class="title-name">软件中心</span>
+              的整体满意度如何？
+            </span>
+            <template v-else>历史反馈信息<ReuseablePopupHint /></template>
+          </div>
           <template v-if="!isShowingFeedbackList">
-            <ORate v-model="rateVal" @change="onRateChange" color="danger" style="margin-top: 16px" />
+            <ScoreSlider v-model="rateVal" :show-desc="true" @change="onRateChange" />
             <OTextarea
               @input="onInput"
               v-model="feedbackContent"
-              placeholder="请输入您的反馈"
+              :placeholder="placeholder"
               :max-length="500"
               resize="none"
               clearable
               style="margin-top: 16px; width: 300px; height: 88px"
               :inputOnOutlimit="false"
             />
-            <OButton class="button" color="primary" variant="solid" round="pill" @click="postFeedback">提交反馈</OButton>
+            <OButton class="button" color="primary" variant="solid" round="pill" @click="postFeedback">提交</OButton>
           </template>
           <div ref="feedbackListRef" class="feedback-list" v-else>
             <div class="mask" v-if="loading">
@@ -339,7 +365,14 @@ onUnmounted(() => window.sessionStorage.removeItem(STORAGE_KEY));
             </Error404Result>
           </div>
           <div class="bottom-link">
-            <OLink @click="onClickSwitch">{{ bottomLinkContent }}</OLink>
+            <OLink v-if="loginStore.isLogined" @click="onClickSwitch">{{ bottomLinkContent }}</OLink>
+            <template v-else>
+              <OLink @click="goToLogin" style="margin-right: 4px;" color="primary">
+                登录
+              </OLink>
+              查看历史反馈信息
+              <ReuseablePopupHint />
+            </template>
           </div>
         </div>
       </OPopup>
@@ -364,6 +397,7 @@ onUnmounted(() => window.sessionStorage.removeItem(STORAGE_KEY));
   align-items: center;
   box-shadow: var(--o-shadow-3);
   z-index: 1000;
+  border-radius: 4px;
 
   cursor: pointer;
   position: fixed;
@@ -380,6 +414,11 @@ onUnmounted(() => window.sessionStorage.removeItem(STORAGE_KEY));
     height: 1px;
     background-color: transparent;
   }
+
+  color: var(--o-color-control3);
+  @include hover {
+    color: var(--o-color-primary1);
+  }
 }
 
 .global-feedback {
@@ -393,6 +432,23 @@ onUnmounted(() => window.sessionStorage.removeItem(STORAGE_KEY));
   padding-bottom: 0;
   color: var(--o-color-info2);
   border: none;
+  border-radius: 4px;
+
+  .help-icon {
+    margin-left: 10px;
+    font-size: 20px;
+    cursor: pointer;
+    color: var(--o-color-control3);
+
+    @include hover {
+      color: var(--o-color-primary1);
+    }
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
 
   .title {
     font-weight: 500;
@@ -400,17 +456,28 @@ onUnmounted(() => window.sessionStorage.removeItem(STORAGE_KEY));
     align-items: center;
     @include tip1;
 
-    .help-icon {
-      width: 16px;
-      margin-left: 10px;
+    .title-name {
+      font-weight: 600;
     }
   }
 
   .close-icon {
     position: absolute;
-    top: 12px;
+    top: 8px;
     right: 12px;
     cursor: pointer;
+    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+    font-size: 20px;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    @include hover {
+      transform: rotate(180deg);
+      color: var(--o-color-primary1);
+    }
   }
 
   .bottom-link {
@@ -496,13 +563,14 @@ onUnmounted(() => window.sessionStorage.removeItem(STORAGE_KEY));
         flex-shrink: 0;
         @include tip1;
 
-        :deep(.o-link-label) {
+        :deep(.o-link-main) {
           display: flex;
           align-items: center;
           gap: 8px;
 
           svg {
-            width: 16px;
+            width: 1em;
+            height: 1em;
             margin-right: 4px;
           }
         }
diff --git a/src/components/globalFeedback/ScoreSlider.vue b/src/components/globalFeedback/ScoreSlider.vue
new file mode 100644
index 0000000..587db84
--- /dev/null
+++ b/src/components/globalFeedback/ScoreSlider.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { ElSlider } from 'element-plus';
+import { computed, ref, type CSSProperties } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: number;
+    showDesc?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+  }>(),
+  {
+    min: 0,
+    max: 10,
+    step: 1,
+  }
+);
+const emits = defineEmits<{
+  (event: 'update:modelValue', arg: number): void;
+  (event: 'change', arg: number): void;
+}>();
+
+const showTip = ref(false);
+const score = useVModel(props, 'modelValue', emits);
+
+const tooltipOffset = computed(() => {
+  return `${Math.floor((score.value * 100) / props.max)}%`;
+});
+
+const changeSlider = () => {
+  showTip.value = true;
+};
+
+interface Mark {
+  style: CSSProperties;
+  label: string;
+}
+
+type Marks = Record<number, Mark | string>;
+const marks = computed(() => {
+  const temp: Marks = {};
+  for (let i = 0; i <= props.max; i += props.step) {
+    temp[i] = '';
+  }
+  return temp;
+});
+
+const onChange = (val: number | number[]) => emits('change', val as number);
+</script>
+
+<template>
+  <div class="slider">
+    <div class="slider-body">
+      <div class="slider-tip">
+        <div v-show="showTip" class="slide-btn-tip">
+          {{ score }}
+        </div>
+      </div>
+      <el-slider :min="min" :max="max" :step="step" show-stops v-model="score" :marks="marks" :show-tooltip="false" @input="changeSlider" @change="onChange" />
+    </div>
+
+    <div v-if="showDesc" class="grade-info">
+      <span>0-不满意</span>
+      <span>10-非常满意</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider {
+  --el-slider-button-wrapper-offset: -14px;
+  width: 300px;
+  .slider-body {
+    padding-top: 30px;
+    .slider-tip {
+      position: relative;
+
+      .slide-btn-tip {
+        width: 28px;
+        height: 20px;
+        text-align: center;
+        font-size: var(--o-font_size-tip1);
+        color: var(--o-color-info1);
+        background-color: var(--o-color-fill2);
+        border-radius: var(--o-radius-xs);
+        box-shadow: 0 3px 8px rgba(18, 20, 23, 0.08);
+        backdrop-filter: blur(5px);
+        border: 1px solid var(--o-color-control4-light);
+        position: absolute;
+        top: -32px;
+        transform: translateX(-50%);
+        left: v-bind(tooltipOffset);
+        line-height: 1.15;
+
+        .tip-num {
+          transform: translateY(-3px);
+        }
+
+        &::after {
+          content: '';
+          display: block;
+          width: 8px;
+          height: 8px;
+          transform: rotateZ(45deg);
+          border: 1px solid #000;
+          border-color: transparent var(--o-color-control4-light) var(--o-color-control4-light) transparent;
+          background-color: var(--o-color-fill2);
+          position: absolute;
+          bottom: -4px;
+          right: 9px;
+        }
+      }
+    }
+
+    :deep(.el-slider) {
+      height: auto;
+      height: 10px;
+
+      .el-slider__runway {
+        height: 8px;
+        border-radius: var(--o-radius-xs);
+        background-color: var(--o-color-control1-light);
+      }
+
+      .el-slider__bar {
+        height: 10px;
+        background-image: linear-gradient(270deg, #002fa7 0%, #21a9fc 100%);
+        top: -1px;
+        border-radius: 5px;
+      }
+
+      .el-slider__button-wrapper + div {
+        position: relative;
+        transform: translateY(2px);
+        z-index: 2;
+
+        & + div {
+          transform: translateY(2px);
+          & > .el-slider__stop:nth-of-type(1) {
+            transform: translatex(2px);
+          }
+        }
+      }
+
+      .el-slider__stop {
+        width: 2px;
+        height: 2px;
+        background-color: var(--o-color-control2);
+        top: 1px;
+      }
+
+      .el-slider__marks-stop {
+        background-color: var(--o-color-fill2);
+
+        &:nth-last-of-type(1) {
+          transform: translateX(-4px);
+          background-color: var(--o-color-control2);
+        }
+      }
+
+      .el-slider__button {
+        position: relative;
+        border: none;
+        box-shadow: var(--o-shadow-2);
+
+        &::after {
+          display: block;
+          content: '';
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: var(--o-color-primary1);
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+  }
+
+  .grade-info {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--o-font_size-tip2);
+    color: var(--o-color-info3);
+    margin-top: 14px;
+  }
+}
+</style>
-- 
Gitee