feat: 修改样式
This commit is contained in:
shawko
parent
cdd7d2fccc
commit
3e5c5e4817
BIN
public/logo.ico
Normal file
BIN
public/logo.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { isWebEvn, OSS_URL } from '@/utils'
|
import { isWebEvn } from '@/utils'
|
||||||
import {
|
import {
|
||||||
task_category_word_review,
|
task_category_word_review,
|
||||||
task_id_word_test,
|
task_id_word_test,
|
||||||
@ -31,9 +31,6 @@ const props = defineProps<{
|
|||||||
}>()
|
}>()
|
||||||
const emit = defineEmits(['claim-reward', 'click-reward'])
|
const emit = defineEmits(['claim-reward', 'click-reward'])
|
||||||
defineOptions({ name: 'TaskList' })
|
defineOptions({ name: 'TaskList' })
|
||||||
const bgImg = computed(() => {
|
|
||||||
return `url(${OSS_URL}/urm/task_${props.type}.svg) 100%/cover no-repeat`
|
|
||||||
})
|
|
||||||
|
|
||||||
// 执行导学任务
|
// 执行导学任务
|
||||||
function goToLeadTask(item: any) {
|
function goToLeadTask(item: any) {
|
||||||
@ -212,44 +209,55 @@ function clickReward(item: any) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="task-list-outer">
|
||||||
class="task-list"
|
<div class="task-list">
|
||||||
:style="{
|
<div
|
||||||
background: bgImg,
|
v-if="type !== task_type_achievement"
|
||||||
}"
|
class="task-list-content"
|
||||||
>
|
:class="{
|
||||||
<div
|
'hide-scroll-bar': !isWebEvn,
|
||||||
v-if="type !== task_type_achievement"
|
}"
|
||||||
class="task-list-content"
|
>
|
||||||
:class="{
|
<task-item
|
||||||
'hide-scroll-bar': !isWebEvn,
|
v-for="(item, index) in data"
|
||||||
}"
|
:key="index"
|
||||||
>
|
:item="item"
|
||||||
<task-item
|
:type="type"
|
||||||
v-for="(item, index) in data"
|
@show-reward="clickReward"
|
||||||
:key="index"
|
@process-task="handleReward"
|
||||||
:item="item"
|
/>
|
||||||
:type="type"
|
</div>
|
||||||
@show-reward="clickReward"
|
<div v-else class="achievement">
|
||||||
@process-task="handleReward"
|
<Achievement
|
||||||
/>
|
:data-list="data"
|
||||||
</div>
|
@click="handleReward"
|
||||||
<div v-else class="achievement">
|
@clickReward="clickReward($event)"
|
||||||
<Achievement
|
></Achievement>
|
||||||
:data-list="data"
|
</div>
|
||||||
@click="handleReward"
|
|
||||||
@clickReward="clickReward($event)"
|
|
||||||
></Achievement>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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 {
|
.task-list {
|
||||||
height: 86.42vh;
|
background: #fefeef;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 24vh;
|
height: 100%;
|
||||||
padding-left: 10vh;
|
padding-top: 3.83vh;
|
||||||
|
padding-left: 4.33vh;
|
||||||
|
border-radius: 3.33vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
width: 117.33vh;
|
width: 117.33vh;
|
||||||
height: 54.33vh;
|
height: 54.33vh;
|
||||||
|
|||||||
@ -476,7 +476,7 @@ onUnmounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
@include main_bg;
|
background: $blue-gradient;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding-left: $space-6;
|
padding-left: $space-6;
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
$theme-color: #ffe60f; // 品牌色/主操作按钮/按钮移入/文字链
|
$theme-color: #ffe60f; // 品牌色/主操作按钮/按钮移入/文字链
|
||||||
$theme-minor-color: #fffbd2; // 品牌色/主操作按钮/按钮移入/文字链
|
$theme-minor-color: #fffbd2; // 品牌色/主操作按钮/按钮移入/文字链
|
||||||
// 主题色背景
|
// 主题色背景
|
||||||
$theme-color-bg: #e0ebff;
|
$theme-color-bg: #D4E0F5;
|
||||||
|
|
||||||
// 辅助颜色
|
// 辅助颜色
|
||||||
$success-color: #07cc89;
|
$success-color: #07cc89;
|
||||||
@ -80,6 +80,7 @@ $gradient: linear-gradient(180deg, #4de798 0%, #a2fb6e 100%); // 主渐变
|
|||||||
$gray_bg: $theme-color-bg; // 灰系背景
|
$gray_bg: $theme-color-bg; // 灰系背景
|
||||||
$grey-gradient: $theme-color-bg; // 灰系背景
|
$grey-gradient: $theme-color-bg; // 灰系背景
|
||||||
$white-gradient: $theme-color-bg; // 白系背景
|
$white-gradient: $theme-color-bg; // 白系背景
|
||||||
|
$blue-gradient: #7CABFF;// 蓝色背景
|
||||||
|
|
||||||
$page-fill: #fafafa;
|
$page-fill: #fafafa;
|
||||||
$bg-fill: #fff;
|
$bg-fill: #fff;
|
||||||
|
|||||||
@ -31,7 +31,7 @@ const getCosUrl = (path: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getLogo = () => {
|
const getLogo = () => {
|
||||||
return getCosUrl('urm/logo.png')
|
return '/logo.ico'
|
||||||
}
|
}
|
||||||
|
|
||||||
const getQrCode = () => {
|
const getQrCode = () => {
|
||||||
|
|||||||
13
web.html
13
web.html
@ -1,13 +1,10 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta charset="UTF-8">
|
||||||
<link
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
rel="icon"
|
<link rel="icon" href="/logo.ico" />
|
||||||
type="image/svg+xml"
|
|
||||||
href="https://lxx-web-1313840333.cos.ap-chengdu.myqcloud.com/urm/logo.png"
|
|
||||||
/>
|
|
||||||
<title>灵犀学</title>
|
<title>灵犀学</title>
|
||||||
<style>
|
<style>
|
||||||
body,
|
body,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user