797 lines
26 KiB
Vue
797 lines
26 KiB
Vue
<template>
|
||
<view
|
||
:class="scrollTop > 0 ? 'page-scroll' : ''"
|
||
class="fix-tabbar-page"
|
||
>
|
||
<hx-navbar
|
||
:back="false"
|
||
:fixed="true"
|
||
:statusBar="true"
|
||
:pageScroll.sync="scrollData"
|
||
left-icon="arrowleft"
|
||
color="#333"
|
||
transparent="auto"
|
||
barPlaceholder="hidden"
|
||
title="云灵AI助手"
|
||
@click-left="clickBackHandle"
|
||
/>
|
||
<page-container
|
||
:show="true"
|
||
:overlay="false"
|
||
:z-index="1"
|
||
@beforeleave="pageContainerBeforeleave"
|
||
>
|
||
<view style="opacity: 0;">
|
||
遮罩层，用于监听实体键返回
|
||
</view>
|
||
</page-container>
|
||
<view
|
||
id="fixTbabarBody"
|
||
:style="{
|
||
'padding-top': (44 + statusBarHeight) + 'px'
|
||
}"
|
||
class="fix-tabbar-body"
|
||
>
|
||
<!-- <button @click="ttsHandle({
|
||
content: '是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项。临床试验统计分析结果生成系统是服务于医学研究的数据处理平台。系统聚焦临床试验数据，可对患者入组信息、疗效指标、安全性数据等进行标准化统计分析，自动生成包含描述性统计、假设检验、生存分析等内容的结果报告。支持可视化图表输出，如疗效对比柱状图、不良事件分布饼图等，直观呈现数据特征。具备灵活的参数配置功能，可适配不同试验设计与分析需求，助力研究者高效完成数据解读，为药物研发、临床研究结论输出提供精准的统计支持。',
|
||
conversationId: '123'
|
||
})">播放</button> -->
|
||
<block v-if="chatMessageListLength < 1">
|
||
<view class="home-wrap">
|
||
<view class="home-focus-wrap">
|
||
<view class="focus-guide-wrap">
|
||
<view class="guide-left">
|
||
<image
|
||
:src="webUrl + '/aiChat/logo-01.gif'"
|
||
class="avatar"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view class="guide-right">
|
||
<view class="title">{{ settingInfo.helloMessageTitle }}</view>
|
||
<view class="content">{{ settingInfo.helloMessageContent }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 这里实现商品轮播 -->
|
||
<!-- <view class="recommend-goods-wrap" v-if="recommendGoodsList.length > 0">
|
||
<swiper
|
||
class="goods-swiper"
|
||
:indicator-dots="false"
|
||
:autoplay="false"
|
||
previous-margin="120rpx"
|
||
next-margin="120rpx"
|
||
circular
|
||
@change="onSwiperChange"
|
||
>
|
||
<swiper-item
|
||
v-for="(item, index) in recommendGoodsList"
|
||
:key="index"
|
||
>
|
||
<view
|
||
class="goods-item"
|
||
:class="{ 'active': currentSwiperIndex === index }"
|
||
@click="productItemClickHandle(item)"
|
||
>
|
||
<view class="supplier">
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-57.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
<text class="s-name">{{ item.supplierName || '供应商名称' }}</text>
|
||
<u-icon name="arrow-right" color="#999" size="12"></u-icon>
|
||
</view>
|
||
<view class="title one-t">{{ item.productName || item.name || '商品名称' }}</view>
|
||
<image :src="item.image || item.img" class="p-img" mode="aspectFill" />
|
||
<view class="price">
|
||
<text class="unit">￥</text>
|
||
<text class="num">{{ item.price || '0.00' }}</text>
|
||
</view>
|
||
<view class="actions">
|
||
<view class="btn-buy" @click.stop="productItemBuyNowClickHandle(item)">立即下单</view>
|
||
<view class="btn-gift" @click.stop="productItemGiftBuyClickHandle(item)">送给朋友</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view> -->
|
||
<view class="topic-wrap">
|
||
<view class="title">
|
||
<view class="title-left">大家都在问</view>
|
||
<view class="title-right" @click="loadData">
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-53.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
换一换
|
||
</view>
|
||
</view>
|
||
<view class="list-wrap">
|
||
<view class="list-cont">
|
||
<view
|
||
v-for="(item, index) in topicList"
|
||
:key="index"
|
||
class="list-item"
|
||
@click="topicItemClickHandle(item.title)"
|
||
>
|
||
<image
|
||
v-if="item.isHot"
|
||
:src="webUrl + '/aiChat/hot.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view v-if="chatMessageListLength > 0" class="chat-wrap">
|
||
<view class="chat-list-wrap">
|
||
<view
|
||
v-for="(item, index) in chatMessageList"
|
||
:key="index"
|
||
class="chat-message-item"
|
||
>
|
||
<view v-if="item.type === -1" class="chat-message-body">
|
||
<view class="item-right">
|
||
<view class="txt">
|
||
{{ item.prompt }}
|
||
</view>
|
||
</view>
|
||
<view class="item-right-tools">
|
||
<view class="btn" @click="copyContentHandle(item.prompt)">
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-02.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
复制
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.type === -2" class="chat-message-body">
|
||
<view class="avatar">
|
||
<image
|
||
:src="webUrl + '/aiChat/avatar.png'"
|
||
class="chat-avatar"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view class="item-left">
|
||
<view class="txt">
|
||
<view
|
||
ref="rich-text-box"
|
||
:class="{
|
||
'show-cursor': item.showCursor
|
||
}"
|
||
class="rich-text-box"
|
||
>
|
||
<rich-text
|
||
v-if="item.nodes && item.nodes.length"
|
||
:nodes="item.nodes"
|
||
space="nbsp"
|
||
/>
|
||
<view v-if="!(item.nodes && item.nodes.length) && loading" class="loader-wrap">
|
||
<div class="loading2" />
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="!item.showCursor && item.nodes && item.nodes.length && !item.isError"
|
||
class="bottom-btns"
|
||
>
|
||
<!-- <button
|
||
open-type="share"
|
||
plain="true"
|
||
class="item"
|
||
@click="shareHandle"
|
||
>
|
||
<image
|
||
:src="webUrl + '/icon-25.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
分享
|
||
</button> -->
|
||
<view class="item" @click="copyContentHandle(item.content)">
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-02.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
复制
|
||
</view>
|
||
<view
|
||
v-if="index === (chatMessageListLength - 1)"
|
||
class="item"
|
||
@click="regenerateHandle(item)"
|
||
>
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-04.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
重新生成
|
||
</view>
|
||
<view
|
||
:class="{
|
||
'playing': audioPlayId === item.conversationId && isPlayAudio
|
||
}"
|
||
class="item"
|
||
@click="ttsHandle(item)"
|
||
>
|
||
<image
|
||
:src="webUrl + '/aiChat/' + ((audioPlayId === item.conversationId && isPlayAudio) ? 'audio-on' : 'audio-off') +'.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
/>
|
||
语音播放
|
||
</view>
|
||
<view class="item item2" @click="copyMoreInfoHandle(item)">拷贝</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 换一换 -->
|
||
<view
|
||
v-if="!item.showCursor &&
|
||
item.nodes &&
|
||
item.nodes.length &&
|
||
!item.isError &&
|
||
(item.orderList.length > 0 ||
|
||
item.giftGoodsList.length > 0 ||
|
||
item.goodsList.length > 0 ||
|
||
item.shopList.length > 0 ||
|
||
item.prizeList.length > 0 ||
|
||
item.ichList.length > 0 ||
|
||
item.qianxianList.length > 0
|
||
)
|
||
"
|
||
class="change-list-wrap"
|
||
>
|
||
<!-- 礼品 -->
|
||
<view
|
||
v-if="item.giftGoodsList.length > 0"
|
||
class="recommend-goods-wrap"
|
||
>
|
||
<swiper
|
||
class="goods-swiper"
|
||
:indicator-dots="false"
|
||
:autoplay="false"
|
||
:current="item.currentSwiperIndex"
|
||
previous-margin="120rpx"
|
||
next-margin="120rpx"
|
||
circular
|
||
@change="e => onSwiperChange(index, e)"
|
||
>
|
||
<swiper-item
|
||
v-for="(goodItem, goodIndex) in item.giftGoodsList"
|
||
:key="goodIndex"
|
||
>
|
||
<view
|
||
:class="{ 'active': item.currentSwiperIndex === goodIndex }"
|
||
class="goods-item"
|
||
@click="productItemClickHandle(goodItem)"
|
||
>
|
||
<view class="supplier" @click.stop="productItemSupplierClickHandle(goodItem)">
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-57.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
lazy-load
|
||
/>
|
||
<text class="s-name">{{ goodItem.storeName }}</text>
|
||
<u-icon name="arrow-right" color="#999" size="12"></u-icon>
|
||
</view>
|
||
<view class="title one-t">{{ goodItem.name }}</view>
|
||
<image :src="goodItem.img" class="p-img" mode="aspectFill" lazy-load />
|
||
<view class="price">
|
||
<text class="unit">￥</text>
|
||
<text class="num">{{ goodItem.price }}</text>
|
||
</view>
|
||
<view class="actions">
|
||
<view class="btn-buy" @click.stop="productItemBuyNowClickHandle(goodItem)">立即下单</view>
|
||
<view class="btn-gift" @click.stop="productItemGiftBuyClickHandle(goodItem)">送给朋友</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- 特产商品 -->
|
||
<view v-if="item.goodsList.length > 0" class="list-wrap">
|
||
<view
|
||
v-for="(productItem, productIndex) in item.goodsList"
|
||
:key="productIndex"
|
||
class="product-item"
|
||
@click="productItemClickHandle(productItem)"
|
||
>
|
||
<image
|
||
:src="productItem.img"
|
||
class="img"
|
||
lazy-load
|
||
/>
|
||
<view class="product-info">
|
||
<view class="name one-t">
|
||
{{ productItem.name }}
|
||
</view>
|
||
<view class="price-wrap">
|
||
<view class="price">
|
||
<text class="txt">￥</text>{{ productItem.price }}
|
||
</view>
|
||
<view class="btn">立即查看</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 店铺 -->
|
||
<view v-if="item.shopList.length > 0" class="list-wrap">
|
||
<view
|
||
v-for="(hotel, hotelIndex) in item.shopList"
|
||
:key="hotelIndex"
|
||
class="product-item"
|
||
@click="hotelItemClickHandle(hotel)"
|
||
>
|
||
<view class="hotel-type">
|
||
{{ hotel.hotelTypeName }}
|
||
</view>
|
||
<image
|
||
:src="hotel.img"
|
||
class="img"
|
||
lazy-load
|
||
/>
|
||
<view class="product-info">
|
||
<view class="name one-t">
|
||
{{ hotel.name }}
|
||
</view>
|
||
<view class="desc-wrap one-t">
|
||
{{ hotel.description || '' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 非遗 -->
|
||
<view v-if="item.ichList.length > 0" class="list-wrap">
|
||
<view
|
||
v-for="(ich, ichIndex) in item.ichList"
|
||
:key="ichIndex"
|
||
class="product-item"
|
||
@click="ichItemClickHandle(ich)"
|
||
>
|
||
<image
|
||
:src="ich.img"
|
||
class="img"
|
||
lazy-load
|
||
/>
|
||
<view class="product-info">
|
||
<view class="name one-t">
|
||
{{ ich.name }}
|
||
</view>
|
||
<view class="desc-wrap one-t">
|
||
{{ ich.description || '' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 千县 -->
|
||
<view v-if="item.qianxianList.length > 0" class="list-wrap">
|
||
<view
|
||
v-for="(qianxian, qianxianIndex) in item.qianxianList"
|
||
:key="qianxianIndex"
|
||
class="product-item"
|
||
@click="qianxianItemClickHandle(qianxian)"
|
||
>
|
||
<image
|
||
:src="qianxian.img"
|
||
class="img"
|
||
lazy-load
|
||
/>
|
||
<view class="product-info">
|
||
<view class="name name2 one-t">
|
||
{{ qianxian.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 抽奖 -->
|
||
<view v-if="item.prizeList.length > 0" class="list-wrap prize-list-wrap">
|
||
<view
|
||
v-for="(prize, prizeIndex) in item.prizeList"
|
||
:key="prizeIndex"
|
||
class="prize-item"
|
||
@click="prizeItemClickHandle(prize)"
|
||
>
|
||
<image
|
||
:src="prize.img"
|
||
class="img"
|
||
mode="widthFix"
|
||
lazy-load
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 订单 -->
|
||
<view v-if="item.orderList.length > 0" class="order-list-wrap">
|
||
<view
|
||
v-for="(order, orderIndex) in item.orderList"
|
||
:key="orderIndex"
|
||
class="order-item-wrap"
|
||
>
|
||
<order-item
|
||
:item="order"
|
||
@viewOrderTrack="viewOrderTrackHandle"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="item.shopList.length > 0 ||
|
||
item.goodsList.length > 0 ||
|
||
item.giftGoodsList.length > 0 ||
|
||
item.ichList.length > 0 ||
|
||
item.qianxianList.length > 0 ||
|
||
item.shopList.length > 0
|
||
"
|
||
class="change-btn"
|
||
>
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-change.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
@click="analyzeKeywordsChangeHandle(item.conversationId, item)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 建议提问 -->
|
||
<view
|
||
v-if="index === (chatMessageListLength - 1) && item.listQuestion.length > 0"
|
||
class="suggestion-wrap"
|
||
>
|
||
<view class="suggestion-list">
|
||
<view
|
||
v-for="(question, questionIndex) in item.listQuestion"
|
||
:key="questionIndex"
|
||
class="item"
|
||
@click="suggestionItemClickHandle(question)"
|
||
>
|
||
<view class="item-cont">
|
||
<view class="txt">
|
||
{{ question }}
|
||
</view>
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-03.png'"
|
||
class="pic"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="chatNumber"
|
||
id="bottom_postion"
|
||
class="bottom-postion"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view
|
||
:class="{
|
||
'focus': onFocus
|
||
}"
|
||
class="page-to-bottom"
|
||
>
|
||
<view class="container">
|
||
<view
|
||
v-if="chatNumber"
|
||
class="new-chat"
|
||
@click="createNewHandle"
|
||
>
|
||
<image
|
||
:src="webUrl + '/aiChat/icon-54.png'"
|
||
class="btn-icon"
|
||
mode="widthFix"
|
||
/>
|
||
开启新对话
|
||
</view>
|
||
<image
|
||
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
|
||
:src="webUrl + '/aiChat/down.png'"
|
||
class="icon"
|
||
mode="widthFix"
|
||
@click="scrollToBottomHandle"
|
||
/>
|
||
<view
|
||
v-for="(item, index) in bottomTools"
|
||
:key="index"
|
||
class="bottom-tool-item"
|
||
@click="bottomToolClickHandle(item)"
|
||
>
|
||
<image
|
||
:src="webUrl + '/aiChat/' + item.icon + '.png'"
|
||
class="tool-icon"
|
||
mode="widthFix"
|
||
/>
|
||
{{ item.text }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<bottom-send
|
||
ref="bottomSend"
|
||
:loading="loading"
|
||
:keyboard-height="keyboardHeight"
|
||
@send="streamReq"
|
||
@add="createNewHandle"
|
||
@history="historyViewHandle"
|
||
@focus="inputFocusHandle"
|
||
/>
|
||
<AiHistoryList
|
||
ref="historyView"
|
||
:status-bar-height="statusBarHeight"
|
||
@enter-history="audioStopHandle"
|
||
/>
|
||
<ProductWindow
|
||
ref="attrWindow"
|
||
:attr="attr"
|
||
:cart-num="cart_num"
|
||
:show-ok="!showGiftBtn"
|
||
:is-gift="showGiftBtn"
|
||
:padding-bottom="bottomSafeDistance + 'px'"
|
||
ok-text="立即购买"
|
||
@changeFun="changeFun"
|
||
@ok="buyNowOrGiftBuyReq(1)"
|
||
@gift="buyNowOrGiftBuyReq(2)"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { chatMixinsV2 } from '../mixins/chatMixinsV2.js'
|
||
import goCartMixin from '@/mixins/goCartMixins'
|
||
import {
|
||
getAiSystemInfoSetting,
|
||
getAiSystemInfoTopic
|
||
} from '@/api/public'
|
||
import AiHistoryList from '../components/historyList'
|
||
import BottomSend from '../components/bottomSend.vue'
|
||
import OrderItem from '../components/orderItem.vue'
|
||
import ProductWindow from '@/components/ProductWindow'
|
||
export default {
|
||
name: 'AiChatIndexPage',
|
||
components: {
|
||
AiHistoryList,
|
||
BottomSend,
|
||
OrderItem,
|
||
ProductWindow
|
||
},
|
||
mixins: [chatMixinsV2, goCartMixin],
|
||
data() {
|
||
return {
|
||
cityName: '',
|
||
animationWidth: '150%',
|
||
animationStr: '',
|
||
settingInfo: {},
|
||
topicList: [],
|
||
onlyOneToAddCart: false
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.cityName = options.cityName || ''
|
||
},
|
||
onShow() {
|
||
const addNewChat = uni.getStorageSync('addNewChat') === '1'
|
||
// 从历史界面点击新增对话
|
||
if (addNewChat && this.chatNumber) {
|
||
console.log(addNewChat)
|
||
uni.removeStorageSync('addNewChat')
|
||
this.createNewHandle()
|
||
}
|
||
},
|
||
methods: {
|
||
createdCallbak() {
|
||
this.$nextTick(() => {
|
||
this.scrollToBottomHandle()
|
||
getAiSystemInfoSetting().then(res => {
|
||
const { success, data } = res
|
||
if (success) {
|
||
this.settingInfo = data
|
||
this.animationWidth = `${data.systemTopicDivMaxWidth * 750}rpx`
|
||
this.animationStr = `TranslateXSwiper-${data.systemTopicDivMaxWidth * 10} ${data.systemTopicDivScrollDuration}s infinite linear alternate`
|
||
}
|
||
})
|
||
this.loadData()
|
||
})
|
||
},
|
||
loadData() {
|
||
getAiSystemInfoTopic().then(res => {
|
||
const { success, data } = res
|
||
if (success) {
|
||
// 返回数据先过滤this.topicList，随机保留三条数据
|
||
let list = data || []
|
||
if (this.topicList && this.topicList.length > 0) {
|
||
const currentTitles = this.topicList.map(item => item.title)
|
||
const filtered = list.filter(item => !currentTitles.includes(item.title))
|
||
// 如果过滤后的数据不够3条，就不进行过滤
|
||
if (filtered.length >= 3) {
|
||
list = filtered
|
||
}
|
||
}
|
||
list.sort(() => Math.random() - 0.5)
|
||
this.topicList = list.slice(0, 3)
|
||
}
|
||
})
|
||
},
|
||
// 创建新会话
|
||
createNewHandle() {
|
||
if (this.audioContext) {
|
||
this.audioContext.stop()
|
||
}
|
||
wx.getBackgroundAudioManager().stop()
|
||
if (!this.chatNumber) return
|
||
this.closeWsFn()
|
||
this.chatNumber = ''
|
||
this.showCursor = false
|
||
this.loading = false
|
||
this.getConfigLoading = false
|
||
this.chatMessageList = []
|
||
this.loadData()
|
||
},
|
||
clickBackHandle() {
|
||
if (!this.chatNumber) {
|
||
if (getCurrentPages().length > 1) {
|
||
uni.navigateBack()
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/pages/home/index'
|
||
})
|
||
}
|
||
} else {
|
||
this.createNewHandle()
|
||
}
|
||
},
|
||
pageContainerBeforeleave() {
|
||
if (!this.chatNumber) {
|
||
if (getCurrentPages().length > 1) {
|
||
uni.navigateBack()
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/pages/home/index'
|
||
})
|
||
}
|
||
} else {
|
||
this.createNewHandle()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.chat-wrap {
|
||
padding: 0 0 180rpx 0;
|
||
.chat-info-wrap {
|
||
padding: 24rpx;
|
||
.chat-list-wrap2 {
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
.loading-wrap {
|
||
text-align: center;
|
||
color: #666;
|
||
line-height: 120rpx;
|
||
}
|
||
.rich-text-box {
|
||
max-width: 100%;
|
||
}
|
||
.show-cursor .cursor {
|
||
display: inline-block;
|
||
color: #3D4CF1;
|
||
font-weight: bold;
|
||
animation: blinking 1s infinite;
|
||
}
|
||
|
||
@keyframes blinking {
|
||
from {
|
||
opacity: 1.0;
|
||
}
|
||
|
||
to {
|
||
opacity: 0.0;
|
||
}
|
||
}
|
||
.home-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: calc(100vh - 220rpx);
|
||
padding: 0 0 220rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.focus-guide-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
.guide-left {
|
||
.avatar {
|
||
display: block;
|
||
width: 230rpx;
|
||
height: 404rpx;
|
||
}
|
||
}
|
||
.guide-right {
|
||
position: relative;
|
||
width: 100%;
|
||
padding: 30rpx 0;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
}
|
||
.content {
|
||
padding: 30rpx 0 0 0;
|
||
color: #3D4CF0;
|
||
}
|
||
}
|
||
}
|
||
.topic-wrap {
|
||
width: 100%;
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
color: #3D4CF0;
|
||
font-size: 28rpx;
|
||
.title-left {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
.title-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.icon {
|
||
display: flex;
|
||
width: 40rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
.list-wrap {
|
||
width: 100%;
|
||
padding: 40rpx 0 0 0;
|
||
overflow-x: hidden;
|
||
.list-cont {
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
.list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12rpx 18rpx;
|
||
margin: 0 0 24rpx 0;
|
||
border-radius: 12rpx;
|
||
border: 1rpx solid #ddd;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
.icon {
|
||
display: block;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin: 0 8rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
@keyframes translateXSwiper {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
</style>
|