feat: 修改样式

2026-05-09 11:47:25 +08:00 · 2026-05-09 11:47:25 +08:00 · 3e5c5e4817
commit 3e5c5e4817
parent cdd7d2fccc
6 changed files with 52 additions and 46 deletions
--- a/public/logo.ico
+++ b/public/logo.ico
--- a/src/page/task/components/task-list.vue
+++ b/src/page/task/components/task-list.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isWebEvn, OSS_URL } from '@/utils'
+import { isWebEvn } from '@/utils'
 import {
  task_category_word_review,
  task_id_word_test,
@ -31,9 +31,6 @@ const props = defineProps<{
 }>()
 const emit = defineEmits(['claim-reward', 'click-reward'])
 defineOptions({ name: 'TaskList' })
-const bgImg = computed(() => {
-  return `url(${OSS_URL}/urm/task_${props.type}.svg) 100%/cover no-repeat`
-})

 // 执行导学任务
 function goToLeadTask(item: any) {
@ -212,12 +209,8 @@ function clickReward(item: any) {
 </script>

 <template>
-  <div
-    class="task-list"
-    :style="{
-      background: bgImg,
-    }"
-  >
+  <div class="task-list-outer">
+    <div class="task-list">
      <div
        v-if="type !== task_type_achievement"
        class="task-list-content"
@ -242,14 +235,29 @@ function clickReward(item: any) {
        ></Achievement>
      </div>
    </div>
+  </div>
 </template>

 <style lang="scss" scoped>
+.task-list-outer {
+  width: 127.33vh;
+  height: 65.33vh;
+  margin-top: 14vh;
+  padding: 1.67vh;
+  background: #d3ff5f;
+  border-radius: 3.67vh;
+  box-sizing: border-box;
+}
+
 .task-list {
-  height: 86.42vh;
+  background: #fefeef;
  width: 100%;
-  padding-top: 24vh;
-  padding-left: 10vh;
+  height: 100%;
+  padding-top: 3.83vh;
+  padding-left: 4.33vh;
+  border-radius: 3.33vh;
+  box-sizing: border-box;
+
  &-content {
    width: 117.33vh;
    height: 54.33vh;
--- a/src/page/task/index.vue
+++ b/src/page/task/index.vue
@ -476,7 +476,7 @@ onUnmounted(() => {
  width: 100%;
  height: 100%;
  position: relative;
-  @include main_bg;
+  background: $blue-gradient;
  display: flex;
  gap: 10px;
  padding-left: $space-6;
--- a/src/styles/variate.scss
+++ b/src/styles/variate.scss
@ -2,7 +2,7 @@
 $theme-color: #ffe60f; // 品牌色/主操作按钮/按钮移入/文字链
 $theme-minor-color: #fffbd2; // 品牌色/主操作按钮/按钮移入/文字链
 // 主题色背景
-$theme-color-bg: #e0ebff;
+$theme-color-bg: #D4E0F5;

 // 辅助颜色
 $success-color: #07cc89;
@ -80,6 +80,7 @@ $gradient: linear-gradient(180deg, #4de798 0%, #a2fb6e 100%); // 主渐变
 $gray_bg: $theme-color-bg; // 灰系背景
 $grey-gradient: $theme-color-bg; // 灰系背景
 $white-gradient: $theme-color-bg; // 白系背景
+$blue-gradient: #7CABFF;// 蓝色背景

 $page-fill: #fafafa;
 $bg-fill: #fff;
--- a/src/utils/sass.ts
+++ b/src/utils/sass.ts
@ -31,7 +31,7 @@ const getCosUrl = (path: any) => {
 }

 const getLogo = () => {
-  return getCosUrl('urm/logo.png')
+  return '/logo.ico'
 }

 const getQrCode = () => {
--- a/web.html
+++ b/web.html
@ -1,13 +1,10 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="https://lxx-web-1313840333.cos.ap-chengdu.myqcloud.com/urm/logo.png"
-    />
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/logo.ico" />
    <title>灵犀学</title>
    <style>
      body,