feat: add new features, update theme and build config

- Add 40+ new UI components including chat modules, discovery cards, photo galleries, FAQ and booking tools
- Standardize brand color across all styles by replacing $theme-color-500 SCSS variables with #0ccd58
- Add sass 1.58.3 dependency and update vite config for modern scss compiler support
- Refactor existing components (AddCarCrad, login page) and remove unused /quick/list router route
- Add utility functions for URL parameter handling
- Add static assets including custom znicons font, component images and icons
- Fix scss syntax issues and deprecation warnings
This commit is contained in:
duanshuwen
2026-05-26 22:49:52 +08:00
parent 548df7020c
commit ac8f5b5f64
159 changed files with 12439 additions and 629 deletions

View File

@@ -0,0 +1,127 @@
<template>
<div class="long-text-detail-page flex flex-col">
<TopNavBar title="拍照攻略" background="#E5EFE9" />
<div class="long-text-detail-scroll" scroll-y>
<div class="long-text-detail-content">
<div class="long-text-detail-card">
<div class="long-text-detail-header">
<div class="long-text-detail-title">鸳鸯湖玻璃船这样拍才不亏</div>
<div class="long-text-detail-badge is-blue">拍照攻略</div>
</div>
<div class="long-text-detail-body">
<div class="detail-paragraph">
鸳鸯湖的玻璃船船底是透明的水下世界看得清清楚楚拍照的关键就一句话
<span class="detail-highlight">别只顾着拍人把水下那抹通透的绿一起收进来</span>
</div>
<div class="detail-section-title">三个不会错的机位</div>
<div class="detail-tip-block">
蹲低贴着透明船底拍水草和光斑会铺满整个画面<br />
船头回拍人物背景是大片湖光人物站三分之一处<br />
把手伸进光里拍水面波纹和指尖是很灵的细节
</div>
<div class="detail-paragraph">
时间上
<text class="detail-highlight">上午十点到下午两点</text>
的顺光时段阳光直直照进水里那种绿才透得出来阴天和傍晚水色会闷差很多
</div>
<div class="detail-section-title">手机党看这里</div>
<div class="detail-tip-block">
手机开 0.5x 广角水面和船一起进画隔着玻璃拍记得擦干净船底逆光时手动点一下水面降曝光
</div>
</div>
<div class="detail-action-zone">
<div class="detail-action-label">查看机位图</div>
<div class="photo-card" @click="predivPhoto">
<img class="photo-card-image" :src="photo.thumb" mode="aspectFill" />
<div class="photo-card-caption">
<div class="photo-card-title">{{ photo.title }}</div>
<div class="photo-card-subtitle">{{ photo.sub }}</div>
</div>
<div class="photo-card-expand"></div>
</div>
<div class="detail-action-label">AIGC 合影</div>
<div class="detail-action-card">
<div class="aigc-cover">
<img class="aigc-image" :src="aigc.img" mode="aspectFill" />
<div class="aigc-badge">AI 生成</div>
</div>
<div class="aigc-body">
<div class="aigc-title">{{ aigc.name }}</div>
<div class="aigc-desc">{{ aigc.desc }}</div>
<button class="detail-solid-button aigc-button" @click="jumpAigcClick">
生成我的合影
</button>
</div>
</div>
<div class="detail-action-label">继续追问</div>
<div class="detail-faq-wrap">
<div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
{{ question }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import TopNavBar from "@/components/TopNavBar/index.vue";
import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
import { getAccessToken } from "@/constant/token";
import { navigateTo } from "@/router";
const photo = {
thumb: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp4.jpg",
full: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp4.jpg",
title: "玻璃船底机位",
sub: "蹲低贴船底 · 上午顺光",
};
const aigc = {
name: "鸳鸯湖玻璃船 AIGC 合影",
img: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/20260526101238_396_809.png",
desc: "上船拍一张,小七帮你一键生成专属合影,不用求人也不用自拍杆。",
};
const faq = ["几点光线最好", "船上能站起来拍吗", "穿什么颜色上镜"];
const predivPhoto = () => {
uni.predivImage({
current: photo.full,
urls: [photo.full],
});
};
const showToast = (title) => {
uni.showToast({
title,
icon: "none",
});
};
const jumpAigcClick = () => {
const token = getAccessToken();
navigateTo('https://onefeel.brother7.cn/aigc/#/home', { token: token });
};
const sendReply = (item) => {
uni.navigateBack();
uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
};
</script>
<style scoped lang="scss">
@import "./styles/detail.scss";
</style>