1568 lines
44 KiB
Vue
1568 lines
44 KiB
Vue
<template>
|
||
<view style="overflow-x: hidden; font-size: 0">
|
||
|
||
<!-- <Custom-Header></Custom-Header> -->
|
||
|
||
|
||
<img
|
||
v-if="isInPptr"
|
||
src="/static/header.png"
|
||
style="width: 100%; display: block; margin-bottom: -600rpx"
|
||
/>
|
||
|
||
<view id="headerBox">
|
||
<!-- <Header v-if="!!userFaceInfo" :userFaceInfo="userFaceInfo" /> -->
|
||
<Header v-if="collect" :userFaceInfo="collect" />
|
||
|
||
<view class="download" @click="openEmailDialog" v-if="!isInPptr">
|
||
<view class="download-left">
|
||
<img src="/static/pdf-icon.png" class="pdf-icon" />
|
||
</view>
|
||
<view class="download-center">输入邮件地址获取PDF报告</view>
|
||
|
||
<view class="download-right">确定</view>
|
||
</view>
|
||
|
||
<!-- <view class="report">
|
||
<view class="report-title"> 美学诊断报告 </view>
|
||
<view class="report-title-en"> FD Aesthetic Diagnosis Report </view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view
|
||
style="display: block; background-color: white; position: relative; z-index: 2"
|
||
v-if="isInPptr"
|
||
>
|
||
<img src="/static/nav-1.png" style="width: 100%; display: block" />
|
||
<img src="/static/nav-2.png" style="width: 100%; display: block" />
|
||
</view>
|
||
|
||
<view :class="classFixed" style="width: 100%" v-if="!isInPptr">
|
||
<Tabs :tabs="tabsList" :activeTab="activeTab" @update:activeTab="onTabChange"> </Tabs>
|
||
</view>
|
||
|
||
<view
|
||
class="content"
|
||
:style="{
|
||
paddingTop: (classFixed === '' ? 0 : 60) + 'px',
|
||
overflowY: 'hidden',
|
||
}"
|
||
v-if="collect"
|
||
>
|
||
<view v-if="isInPptr ? true : activeTab === 0">
|
||
<view class="style-type">
|
||
<!--
|
||
基因风格
|
||
warning:
|
||
1、三个图片还未给
|
||
2、type字段还未给
|
||
-->
|
||
|
||
<!-- <genetic-style
|
||
:gender="collect?.sex"
|
||
:pic-list="[
|
||
collect?.eye_img_url ?? '',
|
||
collect?.triangular_area_img_url ?? '',
|
||
collect?.full_face_img_url ?? '',
|
||
]"
|
||
:styleType="collect?.type"
|
||
/> -->
|
||
<genetic-style
|
||
:gender="collect?.sex"
|
||
:pic-list="[
|
||
collect?.firstImageUrl ?? '',
|
||
collect?.secondImageUrl ?? '',
|
||
collect?.thirdImageUrl ?? '',
|
||
]"
|
||
:styleType="collect?.type"
|
||
/>
|
||
|
||
<!-- 肤色-->
|
||
<!-- <SkinColor :skinColor="styleType?.complexion" /> -->
|
||
<SkinColor :skinColor="collect?.complexion" />
|
||
|
||
<FacialColorLatitude
|
||
:hue="collect?.hue ?? 0"
|
||
:chroma="collect?.chroma ?? 0"
|
||
:luminance="collect?.luminance ?? 0"
|
||
/>
|
||
|
||
<!-- 轮廓类型-->
|
||
<template v-if="customFigure">
|
||
<SensoryTypes
|
||
:type="collect.straight_total_score_t"
|
||
:ai-desc="customFigure?.contour?.desc"
|
||
/>
|
||
|
||
<!-- 量感类型-->
|
||
<TypeOfMass
|
||
:type="collect.total_sense_of_quantity_t"
|
||
:ai-desc="customFigure?.quantity?.desc"
|
||
/>
|
||
<!-- <h1>动静类型</h1> -->
|
||
<!-- 动静类型-->
|
||
<Movementtype
|
||
:type="collect.dynamic_static_t"
|
||
:ai-desc="customFigure?.movement?.desc"
|
||
/>
|
||
<!-- 体型-->
|
||
<BodyType :body-type="collect?.somatotype" :gender="collect?.gender" />
|
||
</template>
|
||
|
||
<template v-if="true">
|
||
<!-- 搭配趋势 -->
|
||
<!-- <h1>搭配趋势</h1> -->
|
||
<!-- <CustomSwiper :items="items" /> -->
|
||
|
||
<!-- 个人分格描述报告-->
|
||
<StyleDiagnosticReport :html="customerStyle" />
|
||
|
||
<!-- <BottomPic
|
||
:style-type="collect?.type"
|
||
:psychological-style="collect?.psychological_style"
|
||
:gender="collect.sex"
|
||
/> -->
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="isInPptr ? true : activeTab === 1">
|
||
<view class="style-type">
|
||
<view class="title">四季色彩定位</view>
|
||
<view class="swiper-container">
|
||
<view class="avatar-box">
|
||
<view class="left-btn btn" @click="chageSwiperBtn(-1)">
|
||
<img :src="pngImgUrl + 'leftRe.png'" alt="" srcset="" />
|
||
</view>
|
||
<view class="right-btn btn" @click="chageSwiperBtn(1)">
|
||
<img :src="pngImgUrl + 'rightRe.png'" alt="" srcset="" />
|
||
</view>
|
||
</view>
|
||
<swiper class="swiper" @change="chageSwiper" :current="current">
|
||
<swiper-item v-for="(item, index) in newColorTypeList" :key="index">
|
||
<view class="swiper-item">
|
||
<view class="img-box">
|
||
<view style="width: 235px; height: 235px; position: absolute; z-index: 99">
|
||
<img
|
||
style="width: 235px; height: 235px"
|
||
:src="item.avatarFrameImgUrl"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
</view>
|
||
<view class="avatar">
|
||
<img :src="collect?.avatar_img_url" alt="" srcset="" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="swiper-instructions">
|
||
<view class="swiper-type-name">{{ colorTypeInfo.typeName }}型</view>
|
||
<view class="swiper-type-name-en">{{ colorTypeInfo.enName }}</view>
|
||
<view class="swiper-type-text">
|
||
{{ colorTypeInfo.typeName + '型' === collect.sj_color_type ? '最佳颜色' : '不匹配' }}
|
||
</view>
|
||
</view>
|
||
<view class="content-box">
|
||
<view class="padding-top20">
|
||
<rich-text :nodes="colorTypeText.characteristic"></rich-text>
|
||
</view>
|
||
<view class="padding-top20">
|
||
<img
|
||
class="image"
|
||
:src="colorTypeText.colourDiscImgUrl"
|
||
alt=""
|
||
srcset=""
|
||
@click="previewImage(colorTypeText.colourDiscImgUrl)"
|
||
/>
|
||
</view>
|
||
<view class="padding-top20">
|
||
<rich-text :nodes="colorTypeText.advise"></rich-text>
|
||
</view>
|
||
|
||
<view class="padding-top20">
|
||
<img
|
||
class="image"
|
||
:src="colorTypeText.adviseImgUrl"
|
||
alt=""
|
||
srcset=""
|
||
@click="previewImage(colorTypeText.adviseImgUrl)"
|
||
/>
|
||
</view>
|
||
<view class="padding-top20">
|
||
<rich-text :nodes="fashionNeutrals"></rich-text>
|
||
</view>
|
||
<view class="padding-top20">
|
||
<img
|
||
class="image"
|
||
:src="colorTypeText.fashionNeutralsImgUrl"
|
||
alt=""
|
||
srcset=""
|
||
@click="previewImage(colorTypeText.fashionNeutralsImgUrl)"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 搭配趋势 -->
|
||
<!-- <CustomSwiper :items="items" /> -->
|
||
<view class="padding-top20">{{ colorTypeInfo.typeName }}人穿衣搭配全方案</view>
|
||
<view class="padding-top20">
|
||
<rich-text :nodes="colorTypeText.scheme"></rich-text>
|
||
</view>
|
||
|
||
<view v-if="collect?.gender === '女'" style="padding: 0 20px">
|
||
<view class="reference-img-box">
|
||
<img class="reference-img1" :src="colorTypeInfo.useReferenceImgUrl" />
|
||
</view>
|
||
</view>
|
||
<view style="padding-left: 20px"> 注：人工智能大模型在计算中可能存在0.5%的误差。 </view>
|
||
<view class="reference-complate"> ------ 色彩类型报告完 ------ </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 依此类推 -->
|
||
<view v-if="isInPptr ? true : activeTab === 2">
|
||
<view class="style-type">
|
||
<view class="avatar-warp">
|
||
<view
|
||
:class="index === 1 ? 'avatar-main' : 'avatar-side'"
|
||
v-for="(item, index) in avatarList"
|
||
:key="index"
|
||
>
|
||
<img :src="item.url" alt="" srcset="" @click="previewImage(item.url)" />
|
||
</view>
|
||
</view>
|
||
<view class="rich-text-content">
|
||
<rich-text :nodes="praiseTextList[0]"></rich-text>
|
||
<!-- <view
|
||
class="face-img-box"
|
||
:style="{
|
||
height: userFaceInfo?.gender === '男' ? '150px' : '328px',
|
||
}"
|
||
> -->
|
||
<view
|
||
class="face-img-box"
|
||
:style="{
|
||
height: collect?.gender === '男' ? '150px' : '328px',
|
||
}"
|
||
>
|
||
<img style="object-fit: cover" :src="faceImgUrl" alt="" srcset="" />
|
||
</view>
|
||
<rich-text :nodes="praiseTextList[1]"></rich-text>
|
||
<view class="more-hairstyle">
|
||
<view class="" style="display: flex; justify-content: center; margin-bottom: 16px">
|
||
<view>更多发型一键试戴</view>
|
||
</view>
|
||
<view class="scroll-box">
|
||
<view
|
||
class=""
|
||
@click="toHairstyleRoom(item)"
|
||
v-for="(item, index) in hairStyleList"
|
||
:key="index"
|
||
style="height: 103px; margin-right: 8px"
|
||
>
|
||
<img style="width: 76px; height: 100%" :src="item.fileUrl" alt="" srcset="" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<rich-text :nodes="praiseTextList[2]"></rich-text>
|
||
<view style="margin-top: 56px"> 注：人工智能大模型在计算中可能存在0.5%的误差。 </view>
|
||
<view class="reference-complate" style="margin-bottom: 0; margin-top: 10px">
|
||
------ 发型报告完 ------
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="isInPptr ? true : activeTab === 3">
|
||
<view class="style-type" style="overflow-y: hidden">
|
||
<view class="lucky-color-box" style="overflow-y: hidden">
|
||
<view class="shengxiao">
|
||
<img
|
||
:src="
|
||
`https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
|
||
shegnxiaoImgUrl
|
||
"
|
||
alt=""
|
||
srcset=""
|
||
@click="
|
||
previewImage(
|
||
`https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
|
||
shegnxiaoImgUrl,
|
||
)
|
||
"
|
||
/>
|
||
</view>
|
||
<rich-text :nodes="luckyTxtList[0]"></rich-text>
|
||
<view class="five-attribute-box">
|
||
<view
|
||
class="numblock"
|
||
style="background-color: rgba(193, 156, 45, 1); top: 286px; left: 40px"
|
||
>{{ numToChinese(shengxiaoNumList[0]) }}</view
|
||
>
|
||
<view
|
||
class="numblock"
|
||
style="background-color: rgba(62, 166, 123, 1); top: 32px; left: 119px"
|
||
>{{ numToChinese(shengxiaoNumList[1]) }}</view
|
||
>
|
||
<view class="numblock" style="background-color: rgba(61, 146, 168, 1); top: 136px">{{
|
||
numToChinese(shengxiaoNumList[2])
|
||
}}</view>
|
||
<view
|
||
class="numblock"
|
||
style="background-color: rgba(195, 52, 55, 1); top: 150px; right: 10px"
|
||
>{{ numToChinese(shengxiaoNumList[3]) }}</view
|
||
>
|
||
<view
|
||
class="numblock"
|
||
style="background-color: rgba(253, 231, 73, 1); top: 293px; right: 70px"
|
||
>{{ numToChinese(shengxiaoNumList[4]) }}</view
|
||
>
|
||
<view class="five-attribute">
|
||
<view class="avatorLogo">
|
||
<img :src="userFaceInfo?.avatar_img_url" alt="" srcset="" />
|
||
</view>
|
||
<view>
|
||
<img
|
||
src="https://llshop.zglvling.com/shop/img/png/h5/baseMap.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<rich-text :nodes="luckyTxtList[1]"></rich-text>
|
||
<view style="margin-top: 56px"> 注：人工智能大模型在计算中可能存在0.5%的误差。 </view>
|
||
<view class="reference-complate" style="margin-bottom: 0">
|
||
------ 幸运色分析完 ------
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 图片预览遮罩层 -->
|
||
<view v-if="showPreview" class="preview-mask" @click="closePreview">
|
||
<view class="preview-container" @click.stop>
|
||
<image
|
||
:src="currentPreviewImage"
|
||
class="preview-image"
|
||
mode="widthFix"
|
||
@click="closePreview"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="btn-bottom" v-if="collect">
|
||
<button class="next-btn" @click="openEmailDialog">发送到邮件</button>
|
||
</view> -->
|
||
|
||
<!--
|
||
<view class="m-dialog" v-if="dialog.visible">
|
||
<div class="m-dialog-main">
|
||
<div class="email">
|
||
邮箱：<input
|
||
v-model="email"
|
||
focus
|
||
placeholder="请输入您的邮箱"
|
||
placeholder-class="placeholder"
|
||
/>
|
||
</div>
|
||
|
||
<button class="btn" @click="sendEmail">发送</button>
|
||
</div>
|
||
</view> -->
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
|
||
import Header from './component/Header/index.vue';
|
||
import Tabs from './component/Tabs/index.vue';
|
||
import { fashionNeutrals, colorTypeList, faceList, shengxiaoImgList } from './database';
|
||
import {
|
||
uploadFormData,
|
||
downloadFile,
|
||
numToChinese,
|
||
getMaxElement,
|
||
reorderByValue,
|
||
} from '../../utils/index';
|
||
import GeneticStyle from './component/FirstStyleType/geneticStyle.vue';
|
||
import SkinColor from './component/FirstStyleType/SkinColor.vue';
|
||
import BottomPic from './component/FirstStyleType/BottomPic.vue';
|
||
import StyleDiagnosticReport from './component/FirstStyleType/StyleDiagnosticReport.vue';
|
||
import BodyType from './component/FirstStyleType/BodyType.vue';
|
||
import FacialColorLatitude from './component/FirstStyleType/FacialColorLatitude.vue';
|
||
// import CustomSwiper from './component/CustomSwiper/CustomSwiper';
|
||
import SensoryTypes from './component/FirstStyleType/SensoryTypes.vue';
|
||
import TypeOfMass from './component/FirstStyleType/TypeOfMass.vue';
|
||
import Movementtype from './component/FirstStyleType/Movementtype.vue';
|
||
import ReportApi from '../../sheep/api/report';
|
||
import CustomHeader from './component/CustomHeader/CustomHeader.vue';
|
||
|
||
import * as abc from './api';
|
||
console.log('exchangeHairHistoryByTaskId: xxxxxxxxxx', abc.exchangeHairHistoryByTaskId);
|
||
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import {
|
||
hairText,
|
||
shengxiaoText,
|
||
shengxiaoSystem_prompt,
|
||
statureText,
|
||
styleText,
|
||
} from '@/constant/aiText';
|
||
import { praiseTextApi } from '@/sheep/api/doubao';
|
||
|
||
// const email = ref('');
|
||
|
||
const {
|
||
// praiseTextApi,
|
||
getStyleApi,
|
||
exchangeHairHistoryByTaskId,
|
||
wardrobeListApi,
|
||
hairStyleListApi,
|
||
addHairApi,
|
||
getHairApi,
|
||
getAiFaceResult,
|
||
getUserInfo,
|
||
getUserAvatar,
|
||
sendMail,
|
||
getImage,
|
||
} = ReportApi;
|
||
|
||
const collect = ref(null);
|
||
|
||
const isInPptr = ref(false);
|
||
|
||
onLoad((options) => {
|
||
isInPptr.value = options?.isInPptr == '1';
|
||
|
||
uni.setStorageSync('token', options?.token ?? '92d2805a85ca422e90dd7d50eef49a85');
|
||
console.log('🚀 ~ URL上的token ~ options?.token: ', options?.token);
|
||
|
||
Promise.all([getUserInfo(), getAiFaceResult(), getUserAvatar(), getImage()]).then((result) => {
|
||
const [res1, res2, res3, res4] = result;
|
||
console.log('res4: zzzzzzzzzzzzz', res4.data.list);
|
||
const [{ firstImageUrl, secondImageUrl, thirdImageUrl }] = res4.data.list;
|
||
|
||
const { data } = JSON.parse(res2.result[0].thridResp);
|
||
|
||
const target = Object.assign({}, JSON.parse(res1.data.dataJson), data.face_figure, {
|
||
// avatar_img_url: res3.data.avatar || 'https://puton.huimeimeta.com/imgs/default_avatar.png',
|
||
firstImageUrl,
|
||
secondImageUrl,
|
||
thirdImageUrl,
|
||
avatar_img_url: options.img,
|
||
});
|
||
|
||
target.gender = target.sex || '女';
|
||
collect.value = target;
|
||
|
||
// colorTypeInfo.typeName + '型' === collect.sj_color_type ? '最佳颜色' : '不匹配'
|
||
|
||
// const index = newColorTypeList.value.findIndex((item) => item.typeName + '型' === sj_color_type);
|
||
// console.log('index: vvvvvvvvvvnnnnnnnnnnmmmmmmmmmmmmmm', index);
|
||
|
||
// current.value = index
|
||
|
||
// collect.value.avatar = collect.value.avatar || 'https://puton.huimeimeta.com/imgs/default_avatar.png'
|
||
|
||
console.log('collect.value: ', collect.value);
|
||
});
|
||
});
|
||
|
||
// if (
|
||
// typeof window !== "undefined" &&
|
||
// /MicroMessenger/i.test(navigator.userAgent)
|
||
// ) {
|
||
const pngImgUrl = ref('https://llshop.zglvling.com/shop/img/png/h5/');
|
||
const showPreview = ref(false);
|
||
const currentPreviewImage = ref('');
|
||
let hairStyleList = ref([]);
|
||
const previewImage = (imageUrl) => {
|
||
currentPreviewImage.value = imageUrl;
|
||
showPreview.value = true;
|
||
};
|
||
|
||
const closePreview = (e) => {
|
||
// 阻止事件冒泡
|
||
e.stopPropagation();
|
||
showPreview.value = false;
|
||
currentPreviewImage.value = '';
|
||
};
|
||
|
||
const gifAddress = 'https://llshop.zglvling.com/shop/img/gif/';
|
||
const routes = new URLSearchParams(window.location.search);
|
||
const classFixed = ref('');
|
||
const openId = routes.get('openId');
|
||
const enterType = routes.get('enterType'); // 1: 个人诊断报告 2: 发型试戴
|
||
// const occupation = routes.get("occupation"); // 职业
|
||
// const forWhom = routes.get("forWhom");
|
||
|
||
let scrollHeight = ref(0);
|
||
const activeTab = ref(0);
|
||
|
||
const tabsList = ref([
|
||
{ name: '风格类型', icon: 'icon-style' },
|
||
{ name: '色彩类型', icon: 'icon-color' },
|
||
{ name: '发型发色', icon: 'icon-body' },
|
||
{ name: '幸运色', icon: 'icon-face' },
|
||
]);
|
||
const newColorTypeList = ref([]);
|
||
let shegnxiaoImgUrl = ref('wuxingLoading.png');
|
||
let colorTypeInfo = ref([]);
|
||
const colorTypeText = ref({});
|
||
|
||
const current = ref(2);
|
||
|
||
const praiseTextList = ref([]);
|
||
const userFaceInfo = ref({ avatar_img_url: '' });
|
||
const faceImgUrl = ref('');
|
||
const shengxiao = ref();
|
||
|
||
const chageSwiper = (e) => {
|
||
console.log('e: ', e);
|
||
current.value = e.detail.current;
|
||
colorTypeInfo.value = newColorTypeList.value[current.value];
|
||
};
|
||
|
||
const clothesList = ref([]);
|
||
const styleType = ref({});
|
||
|
||
const chageSwiperBtn = (x) => {
|
||
if (x === -1 && current.value !== 0) {
|
||
current.value--;
|
||
return;
|
||
}
|
||
if (x === 1 && current.value < newColorTypeList.value.length - 1) {
|
||
current.value++;
|
||
}
|
||
};
|
||
const hairIds = ref([]);
|
||
const avatarList = ref([
|
||
{
|
||
id: 1,
|
||
url: 'https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png',
|
||
},
|
||
{
|
||
id: 2,
|
||
url: 'https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png',
|
||
},
|
||
{
|
||
id: 3,
|
||
url: 'https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png',
|
||
},
|
||
]);
|
||
let luckyTxtList = ref([]);
|
||
const shengxiaoNumList = ref([1, 2, 3, 4, 5]);
|
||
const formatText = (text) => {
|
||
text = text.replace(/[\u0000-\u001F]/g, (c) => {
|
||
if (c === '\n') return '\\n';
|
||
if (c === '\r') return '\\r';
|
||
if (c === '\t') return '\\t';
|
||
return '';
|
||
});
|
||
return text;
|
||
};
|
||
const formatPraiseText = (text) => {
|
||
text = formatText(text);
|
||
text = JSON.parse(text).choices[0].message.content;
|
||
text = text.replace(/<\/?strong>/g, '');
|
||
|
||
text = text.replace(/<h1>/g, '<div>').replace(/<\/h1>/g, '</div>');
|
||
|
||
text = text.replace(/<h2>/g, '<div>').replace(/<\/h2>/g, '</div>');
|
||
|
||
text = text.replace(/<h3>/g, '<div>').replace(/<\/h3>/g, '</div>');
|
||
let list = [];
|
||
const split1 = text.split('二、核心风格基因解析');
|
||
list.push(split1[0]);
|
||
split1[1] = '<p>二、核心风格基因解析</p>' + split1[1];
|
||
const split2 = split1[1].split('五、关键细节设计：刘海与发色');
|
||
split2[1] = '<p>五、关键细节设计：刘海与发色</p>' + split2[1];
|
||
list = list.concat(split2);
|
||
return list;
|
||
};
|
||
const formatShengXiao = (text) => {
|
||
text = formatText(text);
|
||
// text = JSON.parse(text).choices[0].message.content;
|
||
text = text.replace(/<h1>/g, '<div>').replace(/<\/h1>/g, '</div>');
|
||
|
||
text = text.replace(/<h2>/g, '<div>').replace(/<\/h2>/g, '</div>');
|
||
|
||
text = text.replace(/<h3>/g, '<div>').replace(/<\/h3>/g, '</div>');
|
||
let list = [];
|
||
const split1 = text.split('二、五行命理与易学幸运色推导');
|
||
list.push(split1[0]);
|
||
split1[1] = '<p>二、五行命理与易学幸运色推导</p>' + split1[1];
|
||
list.push(split1[1]);
|
||
return list;
|
||
};
|
||
|
||
const customFigure = ref(null);
|
||
|
||
const customerStyle = ref('');
|
||
|
||
const getPraiseText = (callWord, type) => {
|
||
let params = {
|
||
// model: "doubao-seed-1-6-250615",
|
||
model: 'doubao-seed-1-6-flash-250715',
|
||
openId: openId,
|
||
text: '',
|
||
type: enterType,
|
||
tabType: '',
|
||
};
|
||
if (type === 1) {
|
||
// params.model = "doubao-1-5-thinking-vision-pro-250428";
|
||
// params.model = "doubao-seed-1-6-250615";
|
||
// params.model = "doubao-seed-1-6-flash-250715";
|
||
params.model = 'doubao-1-5-thinking-pro-m-250428';
|
||
}
|
||
|
||
let customKey = `客户特征：
|
||
性别：${collect?.value?.gender}
|
||
出生年月日：${collect?.value?.birthday}
|
||
年龄：${collect?.value?.age}
|
||
身高：${collect?.value?.height}
|
||
体重：${collect?.value?.weight}
|
||
|
||
量感类型：${collect?.value?.total_sense_of_quantity_t}
|
||
轮廓类型：${collect?.value?.straight_total_score_t}
|
||
动静类型：${collect?.value?.dynamic_static_t}
|
||
基因风格类型：${collect?.value?.type}
|
||
|
||
心理风格：${collect?.value?.psychological_style}
|
||
喜欢配色：${collect?.value?.color}
|
||
心理量感类型：${collect?.value?.ling_of_quantity}
|
||
心理曲直类型：${collect?.value?.right_and_wrong}
|
||
心理动静类型：${collect?.value?.dynamic_and_static}
|
||
体型分类：${collect?.value?.somatotype}
|
||
存在的问题：${collect?.value?.question}
|
||
修饰部位：${collect?.value?.purpose}
|
||
场合需求：${collect?.value?.occasion_dressing}
|
||
三庭五眼特征：${collect?.value?.three_courts_five_eyes}
|
||
亮度：${collect?.value?.luminance}
|
||
嘴型：${collect?.value?.mouth_shape}
|
||
对比度：${collect?.value?.contrast}
|
||
法令纹：${collect?.value?.nasolabial_folds}
|
||
|
||
直曲总分：${collect?.value?.straight_total_score}
|
||
眉形：${collect?.value?.camber}
|
||
眼型：${collect?.value?.ocular_form}
|
||
瞳色：${collect?.value?.eye_color}
|
||
瞳距：${collect?.value?.interpupillary_distance}
|
||
肤色：${collect?.value?.complexion}
|
||
脖长：${collect?.value?.neck_length}
|
||
脸型：${collect?.value?.feature}
|
||
色度：${collect?.value?.chroma}
|
||
色相：${collect?.value?.hue}
|
||
量感总分：${collect?.value?.total_sense_of_quantity}
|
||
面部年龄：${collect?.value?.facial_age}
|
||
面部立体度：${collect?.value?.Facial_three_dimensionality}
|
||
面部颜色对比度：${collect?.value?.face_color_contrast}
|
||
鼻型：${collect?.value?.nose_type}
|
||
鼻子立体度：${collect?.value?.nose_stereo_degree}
|
||
肤色：${collect?.value?.complexion}
|
||
亮度：${collect?.value?.luminance}
|
||
四季色彩季型：${collect?.value?.sj_color_type}
|
||
职业: ${collect?.value?.work}
|
||
最在意谁的意见：${collect?.value?.attention}
|
||
|
||
强调：
|
||
1、客户的性别是${collect?.value?.gender}，千万要以${collect?.value?.gender}性的角度去产出数据，切记，这点十分重要
|
||
2、客户为男性的时候，严禁出现裙装穿搭建议
|
||
|
||
`;
|
||
|
||
if (callWord === 'one') {
|
||
params.tabType = 'hair';
|
||
params.text = hairText(customKey);
|
||
}
|
||
|
||
if (callWord === 'three') {
|
||
params.tabType = 'shengxiao';
|
||
params.text = shengxiaoText(
|
||
collect?.value?.birthday,
|
||
collect?.value?.gender,
|
||
collect?.value?.work,
|
||
);
|
||
|
||
params.system_prompt = shengxiaoSystem_prompt;
|
||
}
|
||
|
||
if (callWord === 'four') {
|
||
params.tabType = 'stature';
|
||
params.text = statureText(
|
||
customKey,
|
||
collect.value?.straight_total_score_t,
|
||
collect.value?.total_sense_of_quantity_t,
|
||
collect.value.dynamic_static_t,
|
||
);
|
||
}
|
||
|
||
if (callWord === 'five') {
|
||
params.tabType = 'style';
|
||
params.text = styleText(customKey);
|
||
}
|
||
|
||
praiseTextApi(params).then((res) => {
|
||
console.log('res: vvvvvvvvvvvvvvvvvvvv-----------oooooooooooo', res);
|
||
// tabType
|
||
if (callWord === 'one') {
|
||
// console.log("数据是什么1", res.data);
|
||
praiseTextList.value = formatPraiseText(res.data);
|
||
} else if (callWord === 'two') {
|
||
return;
|
||
luckyTxtList.value = formatShengXiao(res.data);
|
||
} else if (callWord === 'three') {
|
||
let obj = JSON.parse(res.data);
|
||
|
||
let shengxiaoContent = JSON.parse(obj.choices[0].message.content).content;
|
||
luckyTxtList.value = formatShengXiao(shengxiaoContent.text);
|
||
// console.log(shengxiaoContent, "shengxiaoContent");
|
||
let shengxiaoList = shengxiaoContent.arr;
|
||
shengxiao.value = shengxiaoList[0];
|
||
|
||
shengxiaoNumList.value = shengxiaoList.slice(1);
|
||
|
||
let wuxing = getMaxElement(shengxiaoNumList.value);
|
||
// console.log("wuxing: ", wuxing);
|
||
|
||
for (let i = 0; i < shengxiaoImgList.length; i++) {
|
||
if (
|
||
shengxiaoImgList[i].shengxiao === shengxiao.value &&
|
||
shengxiaoImgList[i].element === wuxing
|
||
) {
|
||
shegnxiaoImgUrl.value = shengxiaoImgList[i].imgUrl;
|
||
}
|
||
}
|
||
} else if (callWord === 'four') {
|
||
const obj = JSON.parse(res.data);
|
||
console.log('obj: ccccccccccccccccccccccccccccc', obj);
|
||
const content = obj.choices[0].message.content;
|
||
customFigure.value = JSON.parse(content);
|
||
|
||
console.log('customFigure.value: mmmmmmmmmmmmmmmmm', customFigure.value);
|
||
} else if (callWord === 'five') {
|
||
const obj = JSON.parse(res.data);
|
||
const content = obj.choices[0].message.content;
|
||
|
||
customerStyle.value = JSON.parse(content).html;
|
||
}
|
||
});
|
||
};
|
||
|
||
// const items = ref([]);
|
||
|
||
// const wardrobeList = () => {
|
||
// // https://llshop.zglvling.com/soapi/wardrobe/clothes_list
|
||
// wardrobeListApi({
|
||
// open_id: openId,
|
||
// // categoryId: 10140,
|
||
// clothesIndex: 1,
|
||
// clothesKind: 0,
|
||
// clothesSize: 12,
|
||
// }).then((res) => {
|
||
// // console.log("衣服列表 -----------------", res.clothesList);
|
||
|
||
// const goods_images = res.clothesList
|
||
// .map((i) => i.goods_image)
|
||
// .filter((i) => i.length >= 5);
|
||
|
||
// items.value = goods_images;
|
||
// // clothesList.value = res.data.wardrobeList.slice(0, 3);
|
||
// });
|
||
// };
|
||
|
||
// wardrobeList();
|
||
|
||
const getHairstyleList = () => {
|
||
hairStyleListApi({
|
||
phone: '17600222111',
|
||
isPerson: 'yes',
|
||
}).then((res) => {
|
||
hairStyleList.value = res.result;
|
||
// console.log(res, "发型列表 -----------------");
|
||
});
|
||
};
|
||
|
||
// getHairstyleList();
|
||
|
||
const pollExchangeHairHistory = (requestId, maxTries = 30, interval = 2000) => {
|
||
let tries = 0;
|
||
const poll = (resolve, reject) => {
|
||
abc
|
||
.exchangeHairHistoryByTaskId({ taskId: requestId })
|
||
.then((ress) => {
|
||
console.log('轮询结果', ress);
|
||
|
||
const siteImg =
|
||
'https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png';
|
||
const images = ress.result.map((i) => i.url).filter((i) => i != siteImg);
|
||
|
||
if ([...new Set(images)].length === 3) {
|
||
resolve(ress);
|
||
}
|
||
// else if (tries >= maxTries) {
|
||
// reject(new Error('轮询超时'));
|
||
// }
|
||
else {
|
||
tries++;
|
||
setTimeout(() => poll(resolve, reject), interval);
|
||
}
|
||
|
||
// if(ress.result.length !== 3) {
|
||
// setTimeout(() => poll(resolve, reject), interval);
|
||
// } else {
|
||
// resolve(ress);
|
||
// }
|
||
})
|
||
.catch((err) => {
|
||
reject(err);
|
||
});
|
||
};
|
||
return new Promise(poll);
|
||
};
|
||
|
||
const getColorTypeText = (sj_color_type) => {
|
||
const found = newColorTypeList.value.find((item) => item.typeName + '型' === sj_color_type);
|
||
if (found) {
|
||
colorTypeText.value = found;
|
||
}
|
||
};
|
||
const addHair = async (data) => {
|
||
await addHairApi({
|
||
openId: openId,
|
||
data: data,
|
||
});
|
||
};
|
||
const getHair = async (data) => {
|
||
let res = await getHairApi({
|
||
openId: openId,
|
||
});
|
||
return res.data;
|
||
};
|
||
|
||
const getUserFaceInfo = async () => {
|
||
getStyleApi({ openId: openId }).then(async (res) => {
|
||
newColorTypeList.value = reorderByValue(colorTypeList, res?.detail?.sj_color_type);
|
||
|
||
colorTypeInfo.value = newColorTypeList.value[0];
|
||
|
||
const findIndex = newColorTypeList.value.findIndex((i) =>
|
||
collect.value.sj_color_type.includes(i.typeName),
|
||
);
|
||
|
||
current.value = findIndex;
|
||
|
||
colorTypeInfo.value = newColorTypeList.value[current.value];
|
||
|
||
userFaceInfo.value = collect.value;
|
||
|
||
if (userFaceInfo?.value?.gender === '男') {
|
||
faceImgUrl.value =
|
||
'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/menhairstyles.png';
|
||
let hairInfo = faceList.find((item) => item.id === 8);
|
||
hairIds.value = hairInfo?.hairStyleIdList;
|
||
// for(let i =0)
|
||
} else {
|
||
for (let i = 0; i < faceList.length; i++) {
|
||
if (userFaceInfo?.value?.feature === faceList[i].name) {
|
||
faceImgUrl.value = faceList[i].imgUrl;
|
||
hairIds.value = faceList[i].hairStyleIdList;
|
||
}
|
||
}
|
||
}
|
||
|
||
getPraiseText('one');
|
||
getPraiseText('three', 1);
|
||
getPraiseText('four');
|
||
getPraiseText('five');
|
||
|
||
// getColorTypeText(res?.detail?.sj_color_type || '');
|
||
getColorTypeText(collect.value.sj_color_type || '');
|
||
|
||
let blob = await downloadFile(userFaceInfo?.value?.avatar_img_url);
|
||
let formData = new FormData();
|
||
formData.append('phone', '17600222111');
|
||
formData.append('isHr', 'false');
|
||
// formData.append('sex', userFaceInfo?.value.gender);
|
||
formData.append('sex', collect.value?.gender == '男' ? 'male' : 'female');
|
||
formData.append('hairIds', hairIds.value);
|
||
// 如果有图片/文件需要上传
|
||
if (blob) {
|
||
formData.append('files', blob, 'avatar.jpg');
|
||
}
|
||
|
||
let taskInfo = await uploadFormData(formData);
|
||
console.log('taskInfo: cccccccccccccccccc', taskInfo);
|
||
let ress = null;
|
||
if (enterType === 'weixin') {
|
||
ress = await getHair();
|
||
} else {
|
||
const uuuress = await pollExchangeHairHistory(taskInfo.requestId);
|
||
console.log('uuuress: xxxxxxxxxxxx', uuuress);
|
||
// await addHair(ress);
|
||
avatarList.value = uuuress.result;
|
||
}
|
||
});
|
||
};
|
||
|
||
const toHairstyleRoom = (item) => {
|
||
wx.miniProgram.navigateTo({
|
||
url: `/pages/hairstyleRoom/index?id=${item.fileId}`,
|
||
success: function () {
|
||
// alert('成功')
|
||
},
|
||
fail(error) {
|
||
// alert('错误', error)
|
||
console.log('navigateTo error: ', error);
|
||
},
|
||
});
|
||
};
|
||
|
||
function getScrollHeight() {
|
||
const tabsEl = document.getElementById('headerBox');
|
||
if (tabsEl) {
|
||
const rect = tabsEl.getBoundingClientRect();
|
||
console.log(rect.height, 'rect.height');
|
||
|
||
scrollHeight.value = rect.height;
|
||
}
|
||
}
|
||
|
||
function onPageScroll(e) {
|
||
let scrollTop = e && e.scrollTop !== undefined ? e.scrollTop : window.scrollY;
|
||
if (scrollTop > scrollHeight.value) {
|
||
//277是需要固定的地方到顶部的距离
|
||
classFixed.value = 'fixed';
|
||
} else {
|
||
classFixed.value = '';
|
||
}
|
||
}
|
||
onMounted(() => {
|
||
getScrollHeight();
|
||
window.addEventListener('scroll', onPageScroll);
|
||
});
|
||
onUnmounted(() => {
|
||
window.removeEventListener('scroll', onPageScroll);
|
||
});
|
||
// getStyleApi({ openId }).then((res) => {
|
||
// styleType.value = res.data;
|
||
// });
|
||
// .then(() => {
|
||
// getUserFaceInfo();
|
||
// });
|
||
|
||
watchEffect(() => {
|
||
if (collect.value) {
|
||
getUserFaceInfo();
|
||
}
|
||
});
|
||
|
||
function onTabChange(tabIndex) {
|
||
// H5端滚动到id=tabs的位置
|
||
if (
|
||
typeof window !== 'undefined' &&
|
||
activeTab.value !== tabIndex &&
|
||
!!window.scrollY &&
|
||
window.scrollY > scrollHeight.value
|
||
) {
|
||
window.scrollTo({ top: scrollHeight.value, behavior: 'smooth' });
|
||
}
|
||
activeTab.value = tabIndex;
|
||
}
|
||
|
||
const dialog = ref({
|
||
visible: false,
|
||
});
|
||
|
||
const openEmailDialog = async () => {
|
||
console.log('openEmailDialog: ');
|
||
const emailVal = window.prompt('请输入邮箱').trim();
|
||
|
||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||
|
||
if (!emailRegex.test(emailVal)) {
|
||
uni.showToast({ title: '请输入正确的邮箱', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
const data = {
|
||
timeout: 120 * 1000,
|
||
url: window.location.href + '&isInPptr=1',
|
||
email: emailVal,
|
||
};
|
||
|
||
console.log('data: xxxxxxxxxx', data);
|
||
|
||
const res = await sendMail(data);
|
||
|
||
if (res.data.code == 0) {
|
||
uni.showToast({ title: '已经进入发送队列，稍后请查收邮件', icon: 'none' });
|
||
} else {
|
||
uni.showToast({ title: '报错，请重新发送', icon: 'error' });
|
||
}
|
||
|
||
// dialog.value.visible = true;
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.report {
|
||
padding: 20px 20px 0;
|
||
}
|
||
|
||
.report-title {
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
line-height: 28px !important;
|
||
letter-spacing: 0px;
|
||
}
|
||
|
||
.report-title-en {
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
line-height: 28px !important;
|
||
letter-spacing: 0px;
|
||
color: rgba(216, 216, 216, 1);
|
||
}
|
||
|
||
.padding-top20 {
|
||
padding: 20px 20px 0;
|
||
}
|
||
|
||
.color-tab-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.color-img {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
border-radius: 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.color-desc {
|
||
text-align: center;
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.title {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.swiper-container {
|
||
position: relative;
|
||
}
|
||
|
||
.avatar-box {
|
||
display: flex;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 235px;
|
||
}
|
||
|
||
.avatar {
|
||
position: absolute;
|
||
width: 235px;
|
||
height: 235px;
|
||
z-index: 9;
|
||
}
|
||
|
||
.avatar img {
|
||
/* width: 235px; */
|
||
height: 235px;
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 235px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.img-box {
|
||
width: 235px;
|
||
position: relative;
|
||
}
|
||
|
||
.btn {
|
||
position: absolute;
|
||
z-index: 999;
|
||
width: 80px;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn img {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.left-btn {
|
||
left: 0;
|
||
}
|
||
|
||
.right-btn {
|
||
right: 0;
|
||
}
|
||
|
||
.swiper-item {
|
||
/* display: block; */
|
||
height: 235px;
|
||
line-height: 28px !important;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
/* background-color: red; */
|
||
}
|
||
|
||
.swiper-instructions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
/* justify-content: center; */
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.swiper-type-name {
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
line-height: 28px !important;
|
||
letter-spacing: 94%;
|
||
}
|
||
|
||
.swiper-type-name-en {
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
line-height: 28px !important;
|
||
letter-spacing: 0%;
|
||
text-transform: uppercase;
|
||
color: rgba(216, 216, 216, 1);
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.swiper-type-text {
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
line-height: 28px !important;
|
||
letter-spacing: 0%;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.image {
|
||
width: 100%;
|
||
}
|
||
|
||
.html-rich-text {
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
font-weight: 400 !important;
|
||
font-size: 14px !important;
|
||
line-height: 28px !important;
|
||
letter-spacing: 0% !important;
|
||
}
|
||
|
||
.reference-title {
|
||
width: 100%;
|
||
height: 17px;
|
||
}
|
||
|
||
.reference-title img {
|
||
width: 100%;
|
||
height: 17px;
|
||
}
|
||
|
||
.reference-img-box {
|
||
height: 195.5px;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.reference-img-box .reference-img1 {
|
||
width: 100%;
|
||
height: 195.5px;
|
||
}
|
||
|
||
.reference-img-box .reference-img2 {
|
||
width: 45px;
|
||
height: 165px;
|
||
}
|
||
|
||
.reference-complate {
|
||
width: 100%;
|
||
height: 21px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
line-height: 28px !important;
|
||
letter-spacing: 0%;
|
||
text-align: center;
|
||
color: rgba(216, 216, 216, 1);
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.avatar-warp {
|
||
width: 100%;
|
||
height: 192px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-main {
|
||
width: 116px;
|
||
height: 160px;
|
||
margin: 0 10px;
|
||
border-radius: 40px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-main img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.avatar-side {
|
||
width: 80px;
|
||
height: 120px;
|
||
/* background-color: yellow; */
|
||
border-radius: 40px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-side img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.rich-text-content {
|
||
padding: 0 20px 20px;
|
||
}
|
||
|
||
.face-img-box {
|
||
width: 336px;
|
||
height: 338px;
|
||
}
|
||
|
||
.face-img-box img {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* border-radius: 8px; */
|
||
}
|
||
|
||
.more-hairstyle {
|
||
width: 100%;
|
||
/* height: 135px; */
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.more-hairstyle img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.lucky-color-box {
|
||
padding: 0 20px;
|
||
min-height: 950px;
|
||
/* overflow-y: hidden; */
|
||
}
|
||
|
||
.shengxiao {
|
||
width: 100%;
|
||
height: 283px;
|
||
}
|
||
|
||
.shengxiao img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.five-attribute-box {
|
||
position: relative;
|
||
/* margin-bottom: 20px; */
|
||
}
|
||
|
||
.numblock {
|
||
width: 50px;
|
||
height: 50px;
|
||
display: flex;
|
||
border-radius: 50%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
color: white;
|
||
z-index: 999;
|
||
}
|
||
|
||
.five-attribute {
|
||
width: 100%;
|
||
/* height: 597px; */
|
||
position: relative;
|
||
}
|
||
|
||
.five-attribute img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.avatorLogo {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 25%;
|
||
width: 66.5px;
|
||
height: 66.5px;
|
||
background-color: red;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 3.22px solid rgba(167, 178, 179, 1);
|
||
}
|
||
|
||
.avatorLogo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.style-type {
|
||
line-height: 28px !important;
|
||
font-family: 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
color: #031c24;
|
||
/* font-family: Molengo; */
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
|
||
/* height: 900px;
|
||
background-color: red; */
|
||
}
|
||
|
||
.trends-title {
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
margin-bottom: 16px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
line-height: 28px !important;
|
||
letter-spacing: 0px;
|
||
}
|
||
|
||
.trends-img-box {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 330px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.trends-img-box1 {
|
||
width: 220px;
|
||
}
|
||
|
||
.trends-img-box1 img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.trends-img-box2 {
|
||
width: 102px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.trends-img {
|
||
width: 102px;
|
||
height: 134px;
|
||
}
|
||
|
||
.trends-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.trends-one-try-btn {
|
||
width: 102px;
|
||
height: 24px;
|
||
background-color: black;
|
||
margin-top: 28px;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
|
||
font-weight: 400;
|
||
font-style: Regular;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 28px !important;
|
||
letter-spacing: 0px;
|
||
}
|
||
|
||
.scroll-box {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
white-space: nowrap;
|
||
scrollbar-width: none;
|
||
/* Firefox 隐藏滚动条 */
|
||
-ms-overflow-style: none;
|
||
/* IE/Edge 隐藏滚动条 */
|
||
}
|
||
|
||
.scroll-box::-webkit-scrollbar {
|
||
display: none;
|
||
/* Chrome/Safari/Opera 隐藏滚动条 */
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 9999;
|
||
}
|
||
|
||
/* 预览遮罩层样式 */
|
||
.preview-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.preview-container {
|
||
width: 90%;
|
||
height: 90%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.preview-image {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
.download {
|
||
background-color: #d9d9d9;
|
||
height: 128rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #fff;
|
||
padding: 0 24rpx;
|
||
|
||
.download-left {
|
||
.pdf-icon {
|
||
width: 102rpx;
|
||
height: 102rpx;
|
||
}
|
||
}
|
||
|
||
.download-center {
|
||
flex: 1;
|
||
align-self: stretch;
|
||
color: #979797;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.download-right {
|
||
width: 150rpx;
|
||
height: 80rpx;
|
||
background-color: #000;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
}
|
||
}
|
||
|
||
.btn-bottom {
|
||
margin-top: 20rpx;
|
||
|
||
height: 300rpx;
|
||
|
||
.next-btn {
|
||
width: 80% !important;
|
||
height: 80rpx;
|
||
// border-radius: 16rpx;
|
||
background-color: #0d232c;
|
||
color: white;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.m-dialog {
|
||
position: fixed;
|
||
inset: 0;
|
||
background-color: rgba(0, 0, 0, 0.4);
|
||
z-index: 9999;
|
||
|
||
.m-dialog-main {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 80%;
|
||
height: 50%;
|
||
background-color: white;
|
||
transform: translate(-50%, -60%);
|
||
border-radius: 15rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// flex-direction: column;
|
||
// justify-content: center;
|
||
padding-top: 250rpx;
|
||
box-sizing: border-box;
|
||
padding-left: 30rpx;
|
||
|
||
.email {
|
||
// font-size: 35rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.placeholder {
|
||
font-size: 35rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.btn {
|
||
width: 80% !important;
|
||
height: 80rpx;
|
||
border-radius: 16rpx;
|
||
margin-top: 50rpx;
|
||
background-color: #0d232c;
|
||
color: white;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|