liguigong
9802ad9812
-将 pages/report/api.js 中的 API 定义移动到 sheep/api/report/index.js - 更新 pages/report/index.vue 中的 API 调用引用 - 删除 pages/report/api.js 中的未使用 API 定义 - 优化 sheep/api/report/index.js 中的 API 定义结构
1618 lines
68 KiB
Vue
1618 lines
68 KiB
Vue
<template>
|
||
<view style="overflow-x: hidden; font-size: 0">
|
||
<view id="headerBox">
|
||
<Header v-if="!!userFaceInfo" :userFaceInfo="userFaceInfo" />
|
||
<view class="report">
|
||
<view class="report-title"> 美学诊断报告 </view>
|
||
<view class="report-title-en"> FD Aesthetic Diagnosis Report </view>
|
||
</view>
|
||
</view>
|
||
<view :class="classFixed" style="width: 100%">
|
||
<Tabs
|
||
:tabs="tabsList"
|
||
:activeTab="activeTab"
|
||
@update:activeTab="onTabChange"
|
||
>
|
||
</Tabs>
|
||
</view>
|
||
<view
|
||
class="content"
|
||
:style="{
|
||
paddingTop: (classFixed === '' ? 0 : 60) + 'px',
|
||
overflowY: 'hidden',
|
||
}"
|
||
>
|
||
<view v-if="activeTab === 0">
|
||
<view class="style-type">
|
||
<!-- 基因风格-->
|
||
<genetic-style
|
||
:gender="styleType.gender"
|
||
:pic-list="[
|
||
styleType.eye_img_url ?? '',
|
||
styleType.triangular_area_img_url ?? '',
|
||
styleType.full_face_img_url ?? '',
|
||
]"
|
||
:styleType="styleType.type"
|
||
/>
|
||
<!-- 肤色-->
|
||
<SkinColor :skinColor="styleType?.complexion" />
|
||
|
||
<FacialColorLatitude
|
||
:hue="styleType?.hue ?? 0"
|
||
:chroma="styleType?.chroma ?? 0"
|
||
:luminance="styleType?.luminance ?? 0"
|
||
/>
|
||
<!-- 轮廓类型-->
|
||
<template v-if="customFigure">
|
||
<SensoryTypes
|
||
:type="styleType.straight_total_score_t"
|
||
:aiDesc="customFigure?.sensory?.desc"
|
||
/>
|
||
<!-- 量感类型-->
|
||
<TypeOfMass
|
||
:type="styleType.total_sense_of_quantity_t"
|
||
:ai-desc="customFigure?.mass?.desc"
|
||
/>
|
||
<!-- 动静类型-->
|
||
<Movementtype
|
||
:type="styleType.dynamic_static_t"
|
||
:ai-desc="customFigure?.movement?.desc"
|
||
/>
|
||
<!-- 体型-->
|
||
|
||
<BodyType
|
||
:body-type="styleType?.somatotype_t"
|
||
:gender="styleType?.gender"
|
||
/>
|
||
</template>
|
||
|
||
<!-- 搭配趋势 -->
|
||
<CustomSwiper :items="items" />
|
||
|
||
<!-- 个人分格描述报告-->
|
||
<StyleDiagnosticReport :html="customerStyle" />
|
||
<BottomPic
|
||
:style-type="styleType?.type"
|
||
:psychological-style="styleType?.psychological_style"
|
||
:gender="styleType.gender"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="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="userFaceInfo?.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 + "型" === userFaceInfo.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="userFaceInfo?.gender === '女'" style="padding: 0 20px">
|
||
<!-- <view class="reference-title">
|
||
<img
|
||
src="https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/reference.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
</view> -->
|
||
<view class="reference-img-box">
|
||
<img
|
||
class="reference-img1"
|
||
:src="colorTypeInfo.useReferenceImgUrl"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<!-- <img
|
||
class="reference-img2"
|
||
src="https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/test2.png"
|
||
alt=""
|
||
srcset=""
|
||
/> -->
|
||
</view>
|
||
</view>
|
||
<view style="padding-left: 20px">
|
||
注：人工智能大模型在计算中可能存在0.5%的误差。
|
||
</view>
|
||
<view class="reference-complate">
|
||
------ 色彩类型报告完 ------
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 依此类推 -->
|
||
<view v-else-if="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',
|
||
}"
|
||
>
|
||
<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-else-if="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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted } 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";
|
||
const {
|
||
praiseTextApi,
|
||
getStyleApi,
|
||
exchangeHairHistoryByTaskId,
|
||
wardrobeListApi,
|
||
hairStyleListApi,
|
||
addHairApi,
|
||
getHairApi,
|
||
} = ReportApi;
|
||
// 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({});
|
||
let current = ref(0);
|
||
const praiseTextList = ref([]);
|
||
const userFaceInfo = ref({ avatar_img_url: "" });
|
||
const faceImgUrl = ref("");
|
||
const shengxiao = ref();
|
||
const chageSwiper = (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();
|
||
|
||
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 = `客户特征：
|
||
性别：${styleType?.value?.gender}
|
||
出生年月日：${styleType?.value?.checkTime}
|
||
年龄：${styleType?.value?.age}
|
||
身高：${styleType?.value?.stature}
|
||
体重：${styleType?.value?.bodyWeight}
|
||
量感类型：${styleType?.value?.total_sense_of_quantity_t}
|
||
轮廓类型：${styleType?.value?.straight_total_score_t}
|
||
动静类型：${styleType?.value?.dynamic_static_t}
|
||
基因风格类型：${styleType?.value?.type}
|
||
心理风格：${styleType?.value?.psychological_style}
|
||
喜欢配色：${styleType?.value?.color}
|
||
心理量感类型：${styleType?.value?.ling_of_quantity}
|
||
心理曲直类型：${styleType?.value?.right_and_wrong}
|
||
心理动静类型：${styleType?.value?.dynamic_and_static}
|
||
体型分类：${styleType?.value?.somatotype}
|
||
存在的问题：${styleType?.value?.question}
|
||
修饰部位：${styleType?.value?.purpose}
|
||
场合需求：${styleType?.value?.occasion_dressing}
|
||
三庭五眼特征：${styleType?.value?.three_courts_five_eyes}
|
||
亮度：${styleType?.value?.luminance}
|
||
嘴型：${styleType?.value?.mouth_shape}
|
||
对比度：${styleType?.value?.contrast}
|
||
法令纹：${styleType?.value?.nasolabial_folds}
|
||
直曲总分：${styleType?.value?.straight_total_score}
|
||
眉形：${styleType?.value?.camber}
|
||
眼型：${styleType?.value?.ocular_form}
|
||
瞳色：${styleType?.value?.eye_color}
|
||
瞳距：${styleType?.value?.interpupillary_distance}
|
||
肤色：${styleType?.value?.complexion}
|
||
脖长：${styleType?.value?.neck_length}
|
||
脸型：${styleType?.value?.feature}
|
||
色度：${styleType?.value?.chroma}
|
||
色相：${styleType?.value?.hue}
|
||
量感总分：${styleType?.value?.total_sense_of_quantity}
|
||
面部年龄：${styleType?.value?.facial_age}
|
||
面部立体度：${styleType?.value?.Facial_three_dimensionality}
|
||
面部颜色对比度：${styleType?.value?.face_color_contrast}
|
||
鼻型：${styleType?.value?.nose_type}
|
||
鼻子立体度：${styleType?.value?.nose_stereo_degree}
|
||
肤色：${styleType?.value?.complexion}
|
||
亮度：${styleType?.value?.luminance}
|
||
四季色彩季型：${styleType?.value?.sj_color_type}
|
||
职业: ${styleType?.value?.work}
|
||
最在意谁的意见：${styleType?.value?.attention}
|
||
|
||
强调：
|
||
1、客户的性别是${styleType?.value?.gender}，千万要以${styleType?.value?.gender}性的角度去产出数据，切记，这点十分重要
|
||
2、客户为男性的时候，严禁出现裙装穿搭建议
|
||
|
||
`;
|
||
// if (
|
||
// openId === "oZRaI4ojHLTcwuQ6yix3QV5sSe0c" ||
|
||
// openId === "oZRaI4tfDP-HgQmyjN7GOqyv4gB0"
|
||
// ) {
|
||
// customKey += `职业: ${styleType?.value?.work}, 最在意谁的意见：${styleType?.value?.attention},`;
|
||
// }
|
||
// customKey += `强调：
|
||
// 1、客户的性别是${styleType?.value?.gender}，千万要以${styleType?.value?.gender}性的角度去产出数据，切记，这点十分重要
|
||
// 2、客户为男性的时候，严禁出现裙装穿搭建议`;
|
||
if (callWord === "one") {
|
||
params.tabType = "hair";
|
||
params.text = `你是个人形象美学顾问，请输出详细的发型风格诊断报告 。
|
||
|
||
${customKey}
|
||
|
||
特别注意： 1：你要根据客户特征给出详细的风格诊断报告 2：以v-html格式输出，只能以div、p、ul、li、ol、span等标签、 3：你要返回给我的结果只能是字符串格式，不能是其它格式 4：除了我要求的格式内容外，不要有额外多余的任何不相干的文字
|
||
风格诊断报告格式如下：
|
||
一、核心风格定位总览
|
||
二、核心风格基因解析
|
||
三、脸型与头型适配优化
|
||
四、发型长度与轮廓推荐
|
||
五、关键细节设计：刘海与发色
|
||
六、发型与整体造型适配建议
|
||
七、避雷指南：需避免的发型雷区
|
||
八、护理与造型小贴士
|
||
九、总结：核心发型逻辑与风格统一
|
||
正确格式案例如下：
|
||
{
|
||
<div>
|
||
<div>一、核心风格定位总览<p>结合您的面部特征（直线型为主，3:2 直曲比）、中大量感（4:3 大量感得分）、方形脸 + 中高立体度五官，以及 25-35
|
||
岁的成熟活力需求，核心发型风格为「直线型力量感为主，融合结构化层次设计」，关键词：大气、利落、现代感、沉稳干练。发型需突出面部立体优势，强化纵向线条延伸感，通过轮廓设计平衡整体比例，同时利用顶部蓬松度与垂坠感提升视觉高度，适配冷冬型配色偏好。
|
||
</p>
|
||
<div>二、核心风格基因解析<div>1. 直曲属性（3:2 直＞曲）<ul>
|
||
<li>适配线条：优先直线条剪裁（直发、几何层次短发、低弧度波浪），避免小卷、羊毛卷等强曲线元素，防止与方形脸、单眼皮的直线型特征冲突。</li>
|
||
<li>细节处理：发尾做锐利直角或轻微外翘（直线型小弧度）增强力量感；长卷发控制直径≥5cm 大波浪，卷度集中发中下部，避免头皮膨胀感。</li>
|
||
</ul>
|
||
<div>2. 量感属性（中大量感，总分 1）<ul>
|
||
<li>重量分布：整体「上厚下薄」，顶部增加 2-3cm 蓬松度（纵向拉高），发尾轻薄处理（减轻视觉重量），平衡中大量感大气特质，避免过轻（超短发）或过重（厚重齐刘海）。</li>
|
||
<li>长度建议：中长发（肩下 15-20cm）或中短发（肩以上 5-10cm）最优，过短显头重脚轻，过长（腰际以下）压身高比例。</li>
|
||
</ul>
|
||
<div>3. 面部立体度（6 分，中高立体度）<ul>
|
||
<li>轮廓设计：避免贴头皮「扁平感」，保留头顶至耳上 2-3cm 蓬松度，通过层次剪裁拉长脸型，弱化方形下颌；中高鼻梁优势用侧分刘海、露额发型强化。</li>
|
||
</ul>
|
||
<div>三、脸型与头型适配优化<div>1. 方形脸（硬朗轮廓，需柔化处理）<ul>
|
||
<li>避坑点：避免一刀切齐发尾（强化方形轮廓）、超短发（突出下颌角）、厚重齐刘海（缩短脸型显头大）。</li>
|
||
<li>加分项：侧分（4:6 分缝）、高层次剪裁（减轻面部宽度）、柔和发尾（外翘 / 内扣），柔化方下颌，配合适中脖长拉长脸型比例。</li>
|
||
</ul>
|
||
<div>2. 身材协调（显高需求适配）<ul>
|
||
<li>纵向线条强化：顶部蓬松度 2-3cm 打造「高颅顶」，纵向延伸视觉比例，适配 180cm 身高；避免贴头皮或扁平顶部设计。</li>
|
||
<li>视觉重心转移：扎发时（高马尾 / 丸子头），发顶蓬松度与头顶高度对齐，强化「上提」效果，转移小腿注意力。</li>
|
||
</ul>
|
||
<div>四、发型长度与轮廓推荐<div>1. 首选：中长发（肩下 15-20cm，结构化层次）<ul>
|
||
<li>核心设计：<ul>
|
||
<li>层次：顶部至耳上 2-3cm 高层次（增加蓬松），中部至发尾 1-2cm 低层次（保持垂坠），避免贴脸；</li>
|
||
<li>发尾：轻微外翘 / 不规则剪裁（打破硬朗感），拒绝死板齐尾；</li>
|
||
<li>轮廓：「倒三角」型（顶蓬尾收），纵向延伸比例。</li>
|
||
</ul>
|
||
</li>
|
||
<li>适配场景：通勤（低马尾 + 发尾外翘）、休闲（直发披散 + 侧分）、正式（中高盘发 + 顶部蓬松）。</li>
|
||
</ul>
|
||
<div>2. 次选：中短发（肩以上 5-10cm，几何剪裁）<ul>
|
||
<li>核心设计：<ul>
|
||
<li>长度：齐肩 / 肩以上 5-10cm，露颈部线条显高；</li>
|
||
<li>层次：两侧剪至下颌线以下（遮盖方下颌），「A」型轮廓修饰面部宽度；</li>
|
||
<li>扎发变体：半扎高马尾（顶蓬尾散），强化纵向线条转移注意力。</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<div>3. 慎选：超短发（下巴以上）/ 长直发（腰际以下）<ul>
|
||
<li>超短发暴露颈部，与中大量感不匹配显头重；长直发无层次显拖沓，增加下半身视觉重量，与显高需求冲突。</li>
|
||
</ul>
|
||
<div>五、关键细节设计：刘海与发色<div>1. 刘海：拒绝厚重，突出纵向线条<ul>
|
||
<li>推荐刘海：<ul>
|
||
<li>侧分长刘海（4:6 分缝）：长度至颧骨下方，直线剪裁露额头 2/3，拉长脸型，适配单眼皮显利落；</li>
|
||
<li>法式刘海：窄宽度（眼尾内侧起），轻薄修饰发际线，不遮眉眼，符合冷冬清爽感。</li>
|
||
</ul>
|
||
</li>
|
||
<li>避雷刘海：齐刘海（缩短脸型显方）、眉上短刘海（与方脸冲突显突兀）。</li>
|
||
</ul>
|
||
<div>2. 发色：冷冬型 + 黄二白适配，高对比显白<ul>
|
||
<li>主色调推荐：<ul>
|
||
<li>冷调深色系：雾感黑茶色、冷棕黑、蓝黑色（显白提气色，与深瞳对比适中，符合冷冬配色）；</li>
|
||
<li>挑染点缀：发尾 1-2 缕冷灰色 / 雾蓝色（≤10% 面积），增加层次提升现代感。</li>
|
||
</ul>
|
||
</li>
|
||
<li>避雷发色：暖调浅色系（金棕 / 橙红显黄）、全头漂浅（奶奶灰 / 银白伤发质，与中大量感气质不符显轻浮）。</li>
|
||
</ul>
|
||
<div>六、发型与整体造型适配建议<div>1. 穿搭风格呼应<ul>
|
||
<li>通勤风（衬衫 / 西装）：高马尾（顶蓬尾齐，高度与眉峰平）或侧分直发，露耳后线条与利落穿搭统一；</li>
|
||
<li>休闲风（T 恤 / 牛仔裤）：半扎高马尾 + 碎发（发尾外翘）或鲨鱼夹高盘发（留龙须发），增加随性；</li>
|
||
<li>正式风（西装 / 礼服）：中高盘发（顶蓬固定）或低马尾（尾端层次），简约大气。</li>
|
||
</ul>
|
||
<div>2. 显高优化技巧<ul>
|
||
<li>顶部蓬松度≥2cm，纵向延伸视觉高度；扎发马尾高度不低于耳垂；</li>
|
||
<li>搭配及膝 / 过膝下装，配合纵向发型线条，整体拉长比例转移小腿注意力。</li>
|
||
</ul>
|
||
<div>七、避雷指南：需避免的发型雷区<ul>
|
||
<li>贴头皮发型：顶蓬＜2cm 显脸大头扁，与 180cm 身高比例失衡；</li>
|
||
<li>厚重齐发尾：强化方形下颌线条，显脸宽；</li>
|
||
<li>小卷 / 羊毛卷：强曲线与直线型面部冲突，增加横向宽度显头大；</li>
|
||
<li>过短刘海：眉上短刘海与单眼皮、方脸风格冲突，显突兀。</li>
|
||
</ul>
|
||
<div>八、护理与造型小贴士<ul>
|
||
<li>日常护理：黄二白肤色易显发质枯黄，每周 1 次深层护发（发膜 + 热毛巾敷 5 分钟）；吹发用圆梳向内扣发尾，维持直线轮廓；</li>
|
||
<li>快速造型：直板夹 160℃夹直刘海 / 发尾（3 分钟搞定），顶蓬用蓬松喷雾（距发根 10cm 喷洒）；</li>
|
||
<li>季节适配：冬季用滋润洗发水 + 护发精油防干燥，夏季选控油洗发水避免塌软。</li>
|
||
</ul>
|
||
<div>九、总结：核心发型逻辑与风格统一<p>核心逻辑：以直线条力量感为基底，通过「顶部蓬松 + 结构化层次 +
|
||
纵向延伸」三大设计点，平衡方形脸硬朗感与中大量感气质，同步实现显高需求。关键细节（侧分长刘海、冷调深色系）强化冷冬型风格统一，整体造型需保持「利落轮廓
|
||
+ 适度蓬松 + 垂坠质感」，与穿搭、场景协同最大化个人魅力。</p>
|
||
</div>
|
||
}
|
||
`;
|
||
}
|
||
if (callWord === "three") {
|
||
params.tabType = "shengxiao";
|
||
// if (
|
||
// openId === "oZRaI4ojHLTcwuQ6yix3QV5sSe0c" ||
|
||
// openId === "oZRaI4tfDP-HgQmyjN7GOqyv4gB0"
|
||
// ) {
|
||
params.text = `用户生日是阳历${userFaceInfo?.value?.checkTime}，性别：${userFaceInfo?.value?.gender}，职业: ${styleType?.value?.work}, 最在意谁的意见：${styleType?.value?.attention},计算这个生日对应的年柱、月柱、日柱的五行属性个数，不计算时柱，不计算藏干。以v-html格式生成,只能以div、p、ul、li、ol、span标签,输出适合颜色报告，需要提到五行的个数。 报告结构严格按照以下内容：一.五行主属性分析（需要提到五行的个数） 二、五行命理与易学幸运色推导 三、场景化搭配建议 四、动态调整建议"，最后以字符串格式返回。返回一个名称为arr的数组，第一个参数“属相”，用用户年龄推算，参数有鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪），第2到第6个数为用“年柱”， “月柱”，“日柱”，“年柱属性”， “月柱属性”，“日柱属性”，等属性推算出的五行个数，最后以数组的形式返回[“属相”， ”金属性个数“，木属性个数“，”水属性个数”，“火属性个数”，”土属性个数“]的形式返回
|
||
特别注意：
|
||
生成一个如下结构的对象
|
||
content:{
|
||
text: 颜色报告内容,
|
||
arr: 属相数组，以["属相",金的个数, 木的个数, 水的个数, 火的个数, 土的个数]的格式返回
|
||
}
|
||
`;
|
||
// } else {
|
||
// params.text = `用户生日是阳历${userFaceInfo?.value?.checkTime}，性别：${userFaceInfo?.value?.gender}，计算这个生日对应的年柱、月柱、日柱的五行属性个数，不计算时柱，不计算藏干。以v-html格式生成,只能以div、p、ul、li、ol、span标签,输出适合颜色报告，需要提到五行的个数。 报告结构严格按照以下内容：一.五行主属性分析（需要提到五行的个数） 二、五行命理与易学幸运色推导 三、场景化搭配建议 四、动态调整建议"，最后以字符串格式返回。返回一个名称为arr的数组，第一个参数“属相”，用用户年龄推算，参数有鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪），第2到第6个数为用“年柱”， “月柱”，“日柱”，“年柱属性”， “月柱属性”，“日柱属性”，等属性推算出的五行个数，最后以数组的形式返回[“属相”， ”金属性个数“，木属性个数“，”水属性个数”，“火属性个数”，”土属性个数“]的形式返回
|
||
// 特别注意：
|
||
// 生成一个如下结构的对象
|
||
// content:{
|
||
// text: 颜色报告内容,
|
||
// arr: 属相数组，以["属相",金的个数, 木的个数, 水的个数, 火的个数, 土的个数]的格式返回
|
||
// }
|
||
// `;
|
||
// }
|
||
|
||
params.system_prompt = `五行八卦中年柱、月柱、日柱的计算规则详解
|
||
|
||
在五行八卦的命理学体系中，年柱、月柱、日柱与每个人息息相关，它们共同构成了八字，被认为能够揭示一个人的命运轨迹和性格特点。下面，让我们一起来深入了解它们的计算规则。
|
||
|
||
一、年柱的计算规则
|
||
|
||
年柱代表出生年份的天干地支组合，它是八字的第一柱，确定了一个人出生年份的基本信息，在命理学中被视为根基，对人生运势有着深远影响。
|
||
|
||
• 天干的确定：
|
||
|
||
◦ 尾数对应法：最为简便的方法是根据公历年的尾数来确定。具体对应关系如下：尾数为4，对应天干甲；尾数为5，对应天干乙；尾数为6，对应天干丙；尾数为7，对应天干丁；尾数为8，对应天干戊；尾数为9，对应天干己；尾数为0，对应天干庚；尾数为1，对应天干辛；尾数为2，对应天干壬；尾数为3，对应天干癸 。例如，2025年，尾数是5，所以年干为乙。
|
||
|
||
◦ 公式计算法：公式为（公历年数 - 3）÷10的余数（整除时按余数为0计），对应天干顺序。如2025年，（2025 - 3）÷10 = 202余2，对应天干乙。
|
||
|
||
• 地支的确定：
|
||
|
||
◦ 生肖对应法：可依据生肖来确定地支。生肖与地支的对应关系为：子鼠、丑牛、寅虎、卯兔、辰龙、巳蛇、午马、未羊、申猴、酉鸡、戌狗、亥猪。比如，2025年是蛇年，对应的地支就是巳。
|
||
|
||
◦ 公式计算法：公式为（公历年数 - 3）÷12的余数（整除时按余数为0计），对应地支顺序。对于2025年，（2025 - 3）÷12 = 168余6，对应地支巳。
|
||
需要特别注意的是，年柱的分界是以每年的立春为界线，立春前出生的人，年柱按上一年计算；立春后出生的人，年柱按下一年计算 。
|
||
|
||
二、月柱的计算规则
|
||
|
||
月柱由月干和月支组成，代表出生月份的天干地支组合，它反映了一个人在成长过程中的阶段性运势和内在特质，在命理学中被视为成长和发展的重要标志。
|
||
|
||
• 月支的确定：月支是固定不变的，以二十四节气为划分依据。从立春开始，正月为寅月（立春当天到惊蛰前一天）；二月为卯月（惊蛰当天到清明前一天）；三月为辰月（清明当天到立夏前一天）；四月为巳月（立夏当天到芒种前一天）；五月为午月（芒种当天到小暑前一天）；六月为未月（小暑当天到立秋前一天）；七月为申月（立秋当天到白露前一天）；八月为酉月（白露当天到寒露前一天）；九月为戌月（寒露当天到立冬前一天）；十月为亥月（立冬当天到大雪前一天）；十一月为子月（大雪当天到小寒前一天）；十二月为丑月（小寒当天到立春前一天）。
|
||
|
||
• 月干的确定：需要根据年干来推算，可借助口诀“甲己之年丙作首，乙庚之年戊为头，丙辛之岁寻庚上，丁壬壬寅顺水流，若问戊癸何处起，甲寅之上好追求” 。意思是，当年干为甲或己时，正月月干为丙；年干为乙或庚时，正月月干为戊；年干为丙或辛时，正月月干为庚；年干为丁或壬时，正月月干为壬；年干为戊或癸时，正月月干为甲。其余月份天干依次顺推。例如，2025年是乙巳年，年干为乙，根据口诀“乙庚之年戊为头”，正月月干为戊，月支为寅，所以2025年正月月柱为戊寅，二月为己卯，三月为庚辰，依此类推。
|
||
|
||
三、日柱的计算规则
|
||
|
||
日柱代表出生日的天干地支组合，是八字的核心部分，被认为能体现一个人的核心性格和命运的关键走向，在命理学中占据着举足轻重的地位。日柱的计算方法较为复杂，以下介绍一种常用的公历计算法：
|
||
|
||
• 计算步骤：
|
||
|
||
◦ 先计算（公历年数 - 1）×5 + （公历年数 - 1）÷4 + 当年日期在当年的天数序号，得到一个总和（这里的除法只取商数，余数忽略不计）。其中，当年日期在当年的天数序号，即从1月1日到出生日期的天数，例如，3月15日出生，当年是平年，1月31天，2月28天，3月15天，天数序号就是31 + 28 + 15 = 74 。
|
||
|
||
◦ 将总和除以60，得到一个余数。
|
||
|
||
◦ 这个余数就是出生日期的天干地支序数。其中，余数除以10的余数为天干序数（整除时按余数为0计，对应天干癸），余数除以12的余数为地支序数（整除时按余数为0计，对应地支亥）。
|
||
|
||
• 举例说明：以2025年5月20日为例，计算过程如下：
|
||
|
||
◦ （2025 - 1）×5 + （2025 - 1）÷4 + （31 + 28 + 31 + 30 + 20）
|
||
= 2024×5 + 2024÷4 + 140
|
||
= 10120 + 506 + 140
|
||
= 10766
|
||
|
||
◦ 10766÷60 = 179余26
|
||
|
||
◦ 26÷10 = 2余6，对应天干己；26÷12 = 2余2，对应地支丑 。所以2025年5月20日的日柱为己丑。
|
||
|
||
• 注意闰年：需要注意的是，如果出生年份是闰年，2月有29天，在计算天数序号时要相应调整。闰年的判断方法是：能被4整除但不能被100整除的年份为闰年，此外能被400整除的年份也是闰年 。例如，2024年是闰年，计算当年天数序号时，2月按29天计算。
|
||
|
||
年柱、月柱和日柱的计算规则虽然复杂，但它们蕴含着古人对时间和命运的深刻理解，是五行八卦命理学的重要基础 。`;
|
||
}
|
||
|
||
if (callWord === "four") {
|
||
params.tabType = "stature";
|
||
params.text = `你是个人形象美学顾问，你擅长通过客户身材特征分析出用户的身材类型
|
||
具体的包裹：轮廓类型、量感类型、动静类型、体型类型
|
||
|
||
${customKey}
|
||
|
||
要求：
|
||
1：你只能分析出的轮廓类型只能是：${styleType.value.straight_total_score_t}，别的类型一概不允许
|
||
2：你只能分析出的量感类型只能是：${styleType.value.total_sense_of_quantity_t}，别的类型一概不允许
|
||
3：你只能分析出的动静类型只能是：${styleType.value.dynamic_static_t}，别的类型一概不允许
|
||
|
||
特别注意：
|
||
你要根据客户特征给出详细的分析结果和分析结果详情，每一中类型的分析结果详情要在200字以内
|
||
你要返回给我的结果只能是json格式，不能是其它格式
|
||
除了我要求的格式内容外，不要有额外多余的任何不相干的文字
|
||
|
||
正确格式案例如下：
|
||
{
|
||
sensory:{
|
||
value: '曲线型',
|
||
desc: '面部五官线条（眉眼、嘴唇等）没有特别强烈的曲线感或直线硬朗感，面部轮廓、发型线条以及穿着的服装（V 领、简洁款式 ）也呈现出既非极端曲线柔和，也非极端直线利落的状态，是较为平衡的直曲适中风格 。'
|
||
},
|
||
mass: {
|
||
value: '中量感',
|
||
desc: '从面部看，五官分布、大小以及整体比例较为均衡，没有特别小巧精致（小量感）或夸张大气（大量感）的特征，身材穿着也呈现出适中的视觉分量，所以是中量感'
|
||
},
|
||
movement: {
|
||
value: '静态型',
|
||
desc: '面部神态平和，发型简洁规整，服装款式简约、颜色沉稳，整体传递出安静、内敛的气质，没有明显的活泼、动感元素，因此判定为静态型 。'
|
||
}
|
||
}
|
||
`;
|
||
}
|
||
|
||
if (callWord === "five") {
|
||
params.tabType = "style";
|
||
params.text = `你是个人形象美学顾问，你擅长通过客户身材特征分析出用户的风格诊断报告。
|
||
${customKey}
|
||
|
||
特别注意：
|
||
1：你要根据客户特征给出详细的风格诊断报告
|
||
2：以v-html格式输出，只能以div、p、ul、li、ol、span、
|
||
3：你要返回给我的结果只能是json格式，不能是其它格式
|
||
4：除了我要求的格式内容外，不要有额外多余的任何不相干的文字
|
||
|
||
风格诊断报告格式如下：
|
||
一：个人风格合心诊断
|
||
1：个人风格密码解析
|
||
2：主导心理风格和基因风格关系
|
||
二、 身材分析与穿搭指南
|
||
三、 配饰规划
|
||
四、 总结与建议
|
||
1：最重要的强化优势
|
||
2：规避要点
|
||
|
||
正确格式案例如下：
|
||
{
|
||
html: '<div><p><span style="font-weight:bold">一、 个人风格核心诊断</span></p>
|
||
<p><span style="font-weight:bold">1. 个人风格密码解析</span></p>
|
||
<p>基于您的面部特征与量感直曲分析，个人风格密码为「中大量感+偏直风格+适中对比度」：</p>
|
||
<ul>
|
||
<li><span style="font-weight:bold">量感维度</span>：大量感得分6、小量感得分4，量感总分2，属于中大量感，面部立体度7（高立体度）、直鼻高立体度，整体呈现舒展大气的视觉张力，避免过度小巧精致的服饰元素
|
||
</li>
|
||
<li><span style="font-weight:bold">直曲维度</span>：直得分7、曲得分3，直曲总分4，偏直风格显著，平直眉、细长单眼皮、直鼻等线条利落，适合简约、几何、结构化的服饰剪裁，减少柔媚蕾丝、荷叶边等过度曲线元素
|
||
</li>
|
||
<li><span style="font-weight:bold">对比度</span>：适中对比度，黄一白肤色搭配深瞳色，色彩搭配可兼顾清爽和谐与适度层次，避免高饱和撞色或过于寡淡的同色系
|
||
</li>
|
||
</ul>
|
||
<p><span style="font-weight:bold">2. 主导心理风格和基因风格关系</span></p>
|
||
<p>
|
||
您的基因风格（外在特征决定）为「利落直感型」，心理风格（偏好夏季季型配色）偏向「清新活力型」，二者可形成「清爽利落」的融合风格——以夏季季型的柔和色调（浅蓝、薄荷绿、粉紫、奶白等）为基础，结合偏直的简约剪裁，既符合基因风格的线条需求，又满足心理偏好的清爽氛围。</p>
|
||
<p><span style="font-weight:bold">二、 身材分析与穿搭指南</span></p>
|
||
<p><span style="font-weight:bold">身材特征</span>：A型身材（上窄下宽），身高160cm、体重53kg，腰部粗、腿粗，核心需求为「勾勒腰线+修饰下半身」
|
||
</p>
|
||
<p><span style="font-weight:bold">1. 上衣选择</span></p>
|
||
<ul>
|
||
<li><span style="font-weight:bold">版型</span>：选「上宽下收」设计，如微泡泡袖、荷叶边袖口（增加上半身量感平衡下半身），腰部做收腰剪裁（如系带、褶皱收腰），直接勾勒腰线
|
||
</li>
|
||
<li><span style="font-weight:bold">领型</span>：V领、方领、一字领，拉长颈部线条同时转移视觉焦点至锁骨/面部，分散腰部注意力
|
||
</li>
|
||
<li><span style="font-weight:bold">图案/色彩</span>：夏季季型配色优先，上半身可尝试小碎花、条纹等图案（增加上半身丰富度），色彩选浅蓝、粉紫等亮色（提亮上身，平衡下半身重量感）
|
||
</li>
|
||
</ul>
|
||
<p><span style="font-weight:bold">2. 下装选择</span></p>
|
||
<ul>
|
||
<li><span style="font-weight:bold">裤装</span>：高腰阔腿裤（垂感面料，长度及脚踝）、直筒裤（避免紧身牛仔裤），裤型从腰部向下自然散开，修饰腿粗，腰部搭配细腰带强调腰线
|
||
</li>
|
||
<li><span style="font-weight:bold">裙装</span>：高腰A字裙（长度过膝5-10cm）、伞裙，裙摆自然展开遮挡臀部及大腿赘肉，腰部做掐褶或同色系腰带收腰
|
||
</li>
|
||
<li><span style="font-weight:bold">色彩</span>：选夏季季型中的低饱和深色（如灰蓝、豆沙紫）或同色系顺色（上下装同色调不同明度），视觉收缩下半身
|
||
</li>
|
||
</ul>
|
||
<p><span style="font-weight:bold">3. 连衣裙推荐</span></p>
|
||
<ul>
|
||
<li>
|
||
首选「收腰A字连衣裙」，腰部收紧+裙摆散开，直接解决腰线与腿粗问题，领口选V领/方领，面料选轻薄雪纺、棉麻（符合夏季清爽感）
|
||
</li>
|
||
<li>避免：紧身包臀裙、无腰线直筒裙（暴露腰部赘肉，显下半身臃肿）</li>
|
||
</ul>
|
||
<p><span style="font-weight:bold">三、 配饰规划</span></p>
|
||
<p><span style="font-weight:bold">1. 腰带</span>：核心配饰！选细款金属腰带（银色/金色，呼应夏季清爽）或同色系皮质腰带，系于高腰位置（肚脐上2cm），明确分割腰线，材质避免过宽过厚（否则显腰粗）
|
||
</p>
|
||
<p><span style="font-weight:bold">2. 耳饰</span>：瓜子脸+细长单眼皮，适合「几何短款耳坠」（如方形、水滴形，长度3-5cm）或简约耳钉，修饰脸型同时不抢面部焦点；避免夸张大耳环（增加下半身视觉重量）
|
||
</p>
|
||
<p><span style="font-weight:bold">3. 项链</span>：人中偏短+薄唇，选「Y型项链」或「锁骨链」（长度40-45cm，吊坠小巧精致），延长面部纵向线条，避免短款choker（靠近唇部显局促）
|
||
</p>
|
||
<p><span style="font-weight:bold">4. 手链/手表</span>：简约细链条手链或方形表盘手表（金属表带），呼应偏直风格，数量控制1-2件，避免繁复堆砌
|
||
</p>
|
||
<p><span style="font-weight:bold">五、 总结与建议</span></p>
|
||
<p><span style="font-weight:bold">1. 最重要的强化优势和规避</span></p>
|
||
<ul>
|
||
<li><span style="font-weight:bold">强化优势</span>：① 利用夏季季型配色（浅蓝、薄荷绿等）提亮黄一白肤色，凸显清爽气质；②
|
||
突出高立体度面部（直鼻、瓜子脸），通过V领/方领服饰+简约耳饰转移视觉焦点；③ 用细腰带强制勾勒腰线，强化身材比例
|
||
</li>
|
||
<li><span style="font-weight:bold">规避要点</span>：① 避免下半身紧身/膨胀设计（如紧身裤、蓬蓬裙），选A字/阔腿版型修饰腿粗；②
|
||
腰部避免无剪裁、松紧带设计，用收腰剪裁+腰带遮挡赘肉；③ 配饰忌过多过杂，保持「少而精」，符合偏直风格的利落感
|
||
</li>
|
||
</ul>
|
||
</div>'
|
||
}
|
||
|
||
|
||
|
||
`;
|
||
}
|
||
|
||
praiseTextApi(params).then((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 obj = {
|
||
// choices: [
|
||
// {
|
||
// finish_reason: "stop",
|
||
// index: 0,
|
||
// logprobs: null,
|
||
// message: {
|
||
// content:
|
||
// '\n{\n "content": {\n "text": "\u003cdiv\u003e\u003cp\u003e1. 五行主属性和八字：此八字中五行水的个数为3个，金、木、火的个数均为1个，土的个数为0个，五行主属性为水，八字为癸亥年、乙酉月、癸巳日。\u003c/p\u003e\u003cp\u003e2. 五行命理和适合颜色：五行命理水旺，土较弱。适合颜色为黑色、深蓝色（水属性），金色、白色（金能生水），也可适当搭配黄色、棕色（补土）。\u003c/p\u003e\u003cp\u003e3. 场景化搭配建议：日常穿着可多选择黑色、深蓝色衣物，搭配金色或白色饰品；家居装饰中，客厅可选用蓝色系窗帘，摆放白色摆件，同时可放置一些黄色的绿植花盆来补土。\u003c/p\u003e\u003cp\u003e4. 动态调整建议：冬季可多使用黑色、深蓝色，增强水的能量；秋季可侧重金色、白色，借助金的力量生水；在土属性相关的场合，如参加户外活动时，可穿戴黄色衣物进行调整。\u003c/p\u003e\u003c/div\u003e",\n "arr": ["猪", "1", "1", "3", "1", "0"]\n }\n}',
|
||
// reasoning_content:
|
||
// '\n用户需要根据生日计算年柱、月柱、日柱的五行属性个数，不考虑时柱和藏干，然后生成颜色报告。首先，我需要确定用户的出生日期对应的八字。阳历1983年10月5日，转换成农历可能需要查万年历。1983年是癸亥年，10月5日对应的农历应该是九月初一左右，但具体的月柱需要根据节气来确定。因为八字中的月份是按节气划分的，不是农历月份。比如，1983年的寒露是10月9日，所以10月5日属于白露到寒露之间，应该是酉月，也就是乙酉月。日柱的话，10月5日查万年历应该是癸巳日。\n\n接下来，确定各柱的五行属性。年柱癸亥，癸属水，亥属水，所以年柱五行是水。月柱乙酉，乙属木，酉属金，所以月柱是木和金。日柱癸巳，癸属水，巳属火，所以日柱是水和火。现在计算五行个数：水出现的次数是年柱癸、亥，日柱癸，共3次；火是日柱巳，1次；木是月柱乙，1次；金是月柱酉，1次；土没有出现，所以土是0。\n\n然后，属相是根据年份来的，1983年是癸亥年，属猪，所以属相是猪。\n\n接下来生成颜色报告。五行主属性方面，水最多，所以主属性是水，八字中五行水3个，金1个，木1个，火1个，土0个。五行命理水旺，适合的颜色应该是水对应的黑色、深蓝色，以及金生水的金色、白色，因为土弱，可能需要补土，土的颜色是黄色、棕色。场景化搭配建议比如日常穿着、家居装饰用适合的颜色，动态调整建议根据季节变化，比如冬季多用水色，秋季用金色等。\n\n最后，构建数组arr，属相是猪，五行个数依次是金1，木1，水3，火1，土0，所以数组是["猪", "1", "1", "3", "1", "0"]。需要确保格式正确，使用指定的HTML标签，并且内容符合要求。\n',
|
||
// role: "assistant",
|
||
// },
|
||
// },
|
||
// ],
|
||
// created: 1753862444,
|
||
// id: "0217538624170875e9da5334f92484a34371d3058e6715876e3da",
|
||
// model: "doubao-1-5-thinking-pro-m-250428",
|
||
// service_tier: "default",
|
||
// object: "chat.completion",
|
||
// usage: {
|
||
// completion_tokens: 783,
|
||
// prompt_tokens: 435,
|
||
// total_tokens: 1218,
|
||
// prompt_tokens_details: { cached_tokens: 0 },
|
||
// completion_tokens_details: { reasoning_tokens: 506 },
|
||
// },
|
||
// };
|
||
// console.log(text, "text33333333333333333333");
|
||
|
||
// if (text.startsWith('"') && text.endsWith('"')) {
|
||
// text = text.slice(1, -1);
|
||
// }
|
||
|
||
// let obj = JSON.parse(text);
|
||
|
||
// let shengxiaoList = JSON.parse(obj.choices[0].message.content);
|
||
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: ", obj);
|
||
const content = obj.choices[0].message.content;
|
||
customFigure.value = JSON.parse(content);
|
||
} 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) => {
|
||
exchangeHairHistoryByTaskId({ taskId: requestId })
|
||
.then((ress) => {
|
||
// console.log("轮询结果", ress);
|
||
if (
|
||
ress.result[0].url !==
|
||
"https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png" &&
|
||
ress.result[1].url !==
|
||
"https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png" &&
|
||
ress.result[2].url !==
|
||
"https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png"
|
||
) {
|
||
resolve(ress);
|
||
} else if (tries >= maxTries) {
|
||
reject(new Error("轮询超时"));
|
||
} else {
|
||
tries++;
|
||
setTimeout(() => poll(resolve, reject), interval);
|
||
}
|
||
})
|
||
.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];
|
||
|
||
userFaceInfo.value = res.data || {};
|
||
if (!userFaceInfo.value.avatar_img_url) {
|
||
userFaceInfo.value.avatar_img_url =
|
||
"https://llshop.zglvling.com/shop/img/jpg/avatar.jpg";
|
||
}
|
||
|
||
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 || "");
|
||
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("hairIds", hairIds.value);
|
||
// 如果有图片/文件需要上传
|
||
if (blob) {
|
||
formData.append("files", blob, "avatar.jpg");
|
||
}
|
||
|
||
let taskInfo = await uploadFormData(formData);
|
||
let ress = null;
|
||
if (enterType === "weixin") {
|
||
ress = await getHair();
|
||
} else {
|
||
ress = await pollExchangeHairHistory(taskInfo.requestId);
|
||
await addHair(ress);
|
||
}
|
||
avatarList.value = ress.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();
|
||
});
|
||
|
||
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;
|
||
}
|
||
</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;
|
||
}
|
||
.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>
|