feat: add discovery tool cards, refactor AiTabSwitch and update client configs
- Update xiaoqi client configuration: adjust clientId, sync appid across config files and switch to production build by setting developVersion to false - Refactor AiTabSwitch component to use background images instead of inline image tags, clean up redundant SCSS styles and replace tab icon assets - Add three new Discovery page tool components: audio guide, map guide and photo generator cards - Clean up unused code in Discovery page and ChatMainList component, remove unused scroll view and computed property - Fix regex pattern and formatting issues in update-appid.js script - Comment out unused SpriteAnimator component in ChatMainList
This commit is contained in:
duanshuwen
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view
|
||||
class="discovery-guide-map-tool-card"
|
||||
hover-class="is-pressed"
|
||||
hover-stay-time="80"
|
||||
@tap="handleSelect"
|
||||
>
|
||||
<view class="guide-map-visual">
|
||||
<view class="guidepost-illustration">
|
||||
<view class="guidepost-sign is-pink">
|
||||
<view class="guidepost-line" />
|
||||
</view>
|
||||
<view class="guidepost-sign is-yellow">
|
||||
<view class="guidepost-line" />
|
||||
</view>
|
||||
<view class="guidepost-pole" />
|
||||
<view class="guidepost-base">
|
||||
<view class="guidepost-eye is-left" />
|
||||
<view class="guidepost-eye is-right" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="guide-map-content">
|
||||
<text class="guide-map-title ellipsis-1">{{ normalizedItem.title }}</text>
|
||||
<text class="guide-map-subtitle ellipsis-1">{{ normalizedItem.subTitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const DEFAULT_ITEM = {
|
||||
id: "guide-map",
|
||||
title: "卧龙潭电子导览图",
|
||||
subTitle: "查看景区平面图与设施位置",
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["didSelectItem"]);
|
||||
|
||||
const normalizedItem = computed(() => {
|
||||
const source = Object.keys(props.item).length > 0 ? props.item : DEFAULT_ITEM;
|
||||
|
||||
return {
|
||||
raw: source,
|
||||
id: source.id ?? source.tabContentId ?? DEFAULT_ITEM.id,
|
||||
title: source.title || DEFAULT_ITEM.title,
|
||||
subTitle: source.subTitle || source.desc || DEFAULT_ITEM.subTitle,
|
||||
};
|
||||
});
|
||||
|
||||
const handleSelect = () => {
|
||||
emit("didSelectItem", normalizedItem.value.raw);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,189 @@
|
||||
.discovery-guide-map-tool-card {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.discovery-guide-map-tool-card.is-pressed {
|
||||
opacity: 0.94;
|
||||
}
|
||||
|
||||
.guide-map-visual {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 0 0 88px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
overflow: hidden;
|
||||
border-radius: 28px;
|
||||
background: #c8f4ab;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.guide-map-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 18px 12px 14px;
|
||||
border-radius: 28px;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.guide-map-title {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
color: #123737;
|
||||
font-size: 19px;
|
||||
line-height: 25px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.guide-map-subtitle {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin-top: 2px;
|
||||
color: #9aa4b4;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.guidepost-illustration {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
width: 56px;
|
||||
height: 58px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.guidepost-sign {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
width: 46px;
|
||||
height: 18px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.guidepost-sign::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
top: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
transform: skewX(-26deg);
|
||||
}
|
||||
|
||||
.guidepost-sign.is-pink {
|
||||
top: 0;
|
||||
background: #f27591;
|
||||
}
|
||||
|
||||
.guidepost-sign.is-pink::before {
|
||||
background: #f27591;
|
||||
}
|
||||
|
||||
.guidepost-sign.is-yellow {
|
||||
top: 23px;
|
||||
left: 14px;
|
||||
background: #ffd65f;
|
||||
}
|
||||
|
||||
.guidepost-sign.is-yellow::before {
|
||||
background: #ffd65f;
|
||||
}
|
||||
|
||||
.guidepost-sign.is-yellow::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 0 7px 7px 0;
|
||||
background: #ffd65f;
|
||||
transform: skewX(-28deg);
|
||||
}
|
||||
|
||||
.guidepost-line {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 7px;
|
||||
width: 17px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: rgba(210, 66, 91, 0.55);
|
||||
}
|
||||
|
||||
.guidepost-sign.is-yellow .guidepost-line {
|
||||
background: #ff9e05;
|
||||
}
|
||||
|
||||
.guidepost-pole {
|
||||
position: absolute;
|
||||
left: 27px;
|
||||
top: 39px;
|
||||
width: 12px;
|
||||
height: 16px;
|
||||
background: #b98969;
|
||||
}
|
||||
|
||||
.guidepost-base {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
bottom: 0;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
border-radius: 9px 9px 8px 8px;
|
||||
background: #66d9bf;
|
||||
}
|
||||
|
||||
.guidepost-base::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
width: 18px;
|
||||
height: 13px;
|
||||
border-radius: 8px 0 8px 0;
|
||||
background: #66d9bf;
|
||||
transform: rotate(-14deg);
|
||||
}
|
||||
|
||||
.guidepost-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #463b36;
|
||||
}
|
||||
|
||||
.guidepost-eye::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 7px;
|
||||
width: 6px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: #ff9ab0;
|
||||
}
|
||||
|
||||
.guidepost-eye.is-left {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.guidepost-eye.is-right {
|
||||
right: 8px;
|
||||
}
|
||||
Reference in New Issue
Block a user