all_user/hjsq_landpage
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ui修改

Browse Source
This commit is contained in:
谢宇宁
2026-11-05 12:48:17 +07:00
parent 23df3ae435
commit 1bacead9c4
18 changed files with 360 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/IosInstallGuide.vue
+37 -30
View File
@@ -1,16 +1,16 @@
<template>
<!-- Safari 轻量版安装引导：三步（Figma 63:89569 / 63:89572） -->
<div v-if="show" class="ios-guide" role="dialog" aria-label="51短剧轻量版安装引导">
<div v-if="show" class="ios-guide" role="dialog" aria-label="海角社区轻量版安装引导">
<header class="guide-head">
<button class="nav-back" type="button" @click="emit('close')">
<img class="nav-back-ico" :src="iconBack" alt="" width="24" height="24" />
<span>返回</span>
</button>
<div class="top">
<picture class="logo">
<source type="image/webp" :srcset="logoHW" />
<img :src="logoH" alt="51短剧" width="79" height="28" />
</picture>
<span class="logo">
<img src="/b-land/assets/logo-icon-brick.png" alt="海角社区" width="28" height="28" />
<b>海角社区</b>
</span>
<span class="domain">{{ siteHost }}</span>
</div>
</header>
@@ -18,7 +18,7 @@
<div class="content">
<div class="head">
<p class="kicker">轻量版安装</p>
<h2 class="title">51短剧 轻量版安装引导</h2>
<h2 class="title">海角社区 轻量版安装引导</h2>
<p class="desc">三步完成，约 1 分钟。安装后可在桌面直接打开。</p>
</div>
@@ -56,7 +56,7 @@
<span class="path-brand">已下载描述文件</span>
</div>
<div class="path-row">
<span class="path-text">51短剧</span>
<span class="path-text">海角社区</span>
<img class="ico-film" :src="iconFilm" alt="" width="12" height="12" />
<img class="ico-chevron" :src="iconChevron" alt="" width="14" height="14" />
<span class="path-brand">安装</span>
@@ -78,21 +78,19 @@
<span class="step-name">返回桌面打开</span>
</div>
<div class="card">
<p class="card-body">桌面出现「51短剧」图标，点击即可观看。建议同时保存账号凭证。</p>
<p class="card-body">桌面出现「海角社区」图标，点击即可观看。建议同时保存账号凭证。</p>
</div>
</section>
<button class="cta" type="button" @click="emit('close')">
<img class="cta-ico" :src="iconPlay" alt="" width="16" height="16" />
<span>已安装，打开51短剧</span>
<span>已安装，打开海角社区</span>
</button>
</div>
</div>
</template>
<script lang="ts" setup>
import logoH from '~/assets/image/hg/common/logo-h.png'
import logoHW from '~/assets/image/hg/common/logo-h.webp'
import iconFilm from '~/assets/image/hg/mobile/guide/icon-film.svg'
import iconChevron from '~/assets/image/hg/mobile/guide/icon-chevron-right.svg'
import iconPlay from '~/assets/image/hg/mobile/guide/icon-play.svg'
@@ -118,7 +116,7 @@ const emit = defineEmits<{ close: [] }>()
z-index: 999;
display: flex;
flex-direction: column;
background: #0b0b0d;
background: #090b2b;
color: #f2f2f4;
font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
overflow-y: auto;
@@ -127,7 +125,7 @@ const emit = defineEmits<{ close: [] }>()
.guide-head {
flex-shrink: 0;
background: #0b0b0d;
background: #090b2b;
padding-top: env(safe-area-inset-top);
}
@@ -167,16 +165,25 @@ const emit = defineEmits<{ close: [] }>()
box-sizing: border-box;
.logo {
display: block;
width: r(79);
display: flex;
align-items: center;
gap: r(6);
height: r(28);
img {
width: 100%;
height: 100%;
object-fit: contain;
width: r(28);
height: r(28);
border-radius: r(7);
object-fit: cover;
display: block;
}
b {
font-size: r(16);
font-weight: 700;
color: #fff;
white-space: nowrap;
}
}
.domain {
@@ -184,7 +191,7 @@ const emit = defineEmits<{ close: [] }>()
font-size: r(11);
line-height: r(15);
letter-spacing: 0.2em;
color: #6b6b74;
color: #7c86b8;
white-space: nowrap;
}
}
@@ -209,7 +216,7 @@ const emit = defineEmits<{ close: [] }>()
font-size: r(11);
line-height: r(15);
letter-spacing: 0.2em;
color: #e9c977;
color: #8fb6ff;
}
.title {
@@ -226,7 +233,7 @@ const emit = defineEmits<{ close: [] }>()
font-weight: 400;
font-size: r(13);
line-height: r(18);
color: #a1a1aa;
color: #a9b4e0;
}
}
@@ -248,7 +255,7 @@ const emit = defineEmits<{ close: [] }>()
font-size: r(26);
line-height: r(32);
letter-spacing: -0.01em;
color: #ec237f;
color: #4d8dff;
white-space: nowrap;
}
@@ -269,14 +276,14 @@ const emit = defineEmits<{ close: [] }>()
width: 100%;
padding: r(16);
box-sizing: border-box;
background: #141417;
background: #121a4d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: r(12);
}
.ios-alert {
width: 100%;
background: #232328;
background: #1c2768;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: r(14);
overflow: hidden;
@@ -312,14 +319,14 @@ const emit = defineEmits<{ close: [] }>()
&.muted {
font-weight: 500;
color: #a1a1aa;
color: #a9b4e0;
}
&.brand {
font-weight: 600;
font-size: r(15);
letter-spacing: -0.01em;
color: #ec237f;
color: #4d8dff;
border-left: 1px solid rgba(255, 255, 255, 0.07);
}
}
@@ -331,7 +338,7 @@ const emit = defineEmits<{ close: [] }>()
font-size: r(11);
line-height: r(15);
letter-spacing: 0.06em;
color: #6b6b74;
color: #7c86b8;
}
.card-body {
@@ -339,7 +346,7 @@ const emit = defineEmits<{ close: [] }>()
font-weight: 400;
font-size: r(13);
line-height: r(18);
color: #a1a1aa;
color: #a9b4e0;
}
.path-row {
@@ -360,7 +367,7 @@ const emit = defineEmits<{ close: [] }>()
font-weight: 500;
font-size: r(13);
line-height: r(18);
color: #ec237f;
color: #4d8dff;
white-space: nowrap;
}
@@ -389,7 +396,7 @@ const emit = defineEmits<{ close: [] }>()
padding: 0;
border: none;
border-radius: r(24);
background: linear-gradient(172.03deg, #ff4a7b 0%, #ec237f 37.14%, #93226f 71.43%);
background: linear-gradient(172.03deg, #5aa0ff 0%, #4d8dff 37.14%, #1a4fd0 71.43%);
color: #fff;
font-weight: 600;
font-size: r(15);