xsl/meida_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 样式兼容pptr

Browse Source
This commit is contained in:
kenny
2025-12-19 16:59:46 +08:00
parent 1fb39e4721
commit 1533e492e7
23 changed files with 159 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/report/component/FirstStyleType/BodyType.vue
+2 -1
View File
@@ -98,7 +98,7 @@ watch(
<template v-for="item of json">
<CheckBox :checked="item.checked">{{ item.type }}</CheckBox>
</template>
<image class="figure" :src="imageUrl" mode="widthFix"></image>
<img class="figure" :src="imageUrl" mode="widthFix"></img>
</view>
</template>
@@ -109,5 +109,6 @@ watch(
.figure {
margin-top: 26px;
margin-bottom: 12px;
width: 100%;
}
</style>
pages/report/component/FirstStyleType/BottomPic.vue
+9 -11
View File
@@ -49,38 +49,36 @@ watch(
<template
v-if="styleImage === psychologicalStyleImage && props.gender == '女'"
>
<image class="bottomMap" :src="styleImage" mode="widthFix"></image>
<img class="bottomMap" :src="styleImage" >
</template>
<template v-else>
<template v-if="props.gender == '女'">
<image class="bottomMap" :src="styleImage" mode="widthFix"></image>
<img class="bottomMap" :src="styleImage" >
<view>
<view class="psychologicalStyle">心理风格</view>
<image
<img
class="bottomMap"
:src="psychologicalStyleImage"
mode="widthFix"
></image>
>
</view>
</template>
</template>
</view>
<view class="">
<image
<img
class="bottomMap"
:src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/bottomMap.png'"
mode="widthFix"
></image>
>
</view>
<view style="padding-left: 20px; margin-top: 56px">
注：人工智能大模型在计算中可能存在0.5%的误差。
</view>
<view class="reportCompleted">
<image
<img
class="bottomMap"
:src="'/static/reportCompleted.png'"
mode="widthFix"
></image>
>
</view>
</template>
pages/report/component/FirstStyleType/geneticStyle.vue
+100 -93
View File
@@ -1,57 +1,56 @@
<script setup>
import { defineProps, ref, watch } from "vue";
import CheckBox from "./Checkbox.vue";
import { styleJson, manStyleJson } from "./json/style";
import { defineProps, ref, watch } from 'vue';
import CheckBox from './Checkbox.vue';
import { styleJson, manStyleJson } from './json/style';
const props = defineProps({
styleType: {
type: String,
default: "",
},
picList: {
type: Array,
default: () => [], // 使用函数返回默认值
},
gender: {
type: String,
default: "",
},
});
const props = defineProps({
styleType: {
type: String,
default: '',
},
picList: {
type: Array,
default: () => [], // 使用函数返回默认值
},
gender: {
type: String,
default: '',
},
});
console.log('geneticStyle -------------------------------------', props.gender)
console.log('geneticStyle -------------------------------------', props.gender);
const styleTypeDesc = ref("");
const styleTypeJson = ref();
const showPreview = ref(false);
const currentPreviewImage = ref("");
const styleTypeDesc = ref('');
const styleTypeJson = ref();
const showPreview = ref(false);
const currentPreviewImage = ref('');
watch(
() => props.styleType,
(newVal) => {
const json = props.gender === "男" ? manStyleJson : styleJson;
styleTypeJson.value = json.map((item) => ({
...item,
checked: item.type === newVal,
}));
styleTypeDesc.value = styleTypeJson.value.find(
(item) => item.type === props.styleType
)?.value;
},
{ deep: true, immediate: true }
);
watch(
() => props.styleType,
(newVal) => {
const json = props.gender === '男' ? manStyleJson : styleJson;
styleTypeJson.value = json.map((item) => ({
...item,
checked: item.type === newVal,
}));
styleTypeDesc.value = styleTypeJson.value.find(
(item) => item.type === props.styleType,
)?.value;
},
{ deep: true, immediate: true },
);
const previewImage = (imageUrl) => {
const previewImage = (imageUrl) => {
currentPreviewImage.value = imageUrl;
showPreview.value = true;
};
currentPreviewImage.value = imageUrl;
showPreview.value = true;
};
const closePreview = (e) => {
// 阻止事件冒泡
e.stopPropagation();
showPreview.value = false;
currentPreviewImage.value = "";
};
const closePreview = (e) => {
// 阻止事件冒泡
e.stopPropagation();
showPreview.value = false;
currentPreviewImage.value = '';
};
</script>
<template v-if="styleTypeJson">
@@ -70,9 +69,17 @@ const closePreview = (e) => {
:key="index"
:src="pic"
class="pic"
mode="aspectFill"
mode="widthFix"
@click="previewImage(pic)"
></image>
<!-- <img
v-for="(pic, index) in picList"
:key="index"
:src="pic"
@click="previewImage(pic)"
class="pic"
/> -->
</view>
<!-- 图片预览遮罩层 -->
@@ -82,66 +89,66 @@ const closePreview = (e) => {
:src="currentPreviewImage"
class="preview-image"
mode="widthFix"
@click="closePreview"
@click="closePreview"
></image>
</view>
</view>
</template>
<style scoped>
.title {
padding-left: 20px;
line-height: 21px;
margin-bottom: 12px;
}
.title {
padding-left: 20px;
line-height: 21px;
margin-bottom: 12px;
}
.container {
padding: 0 26px;
text-align: justify;
}
.container {
padding: 0 26px;
text-align: justify;
}
.desc {
color: #4e4e4e;
margin-top: 10px;
}
.desc {
color: #4e4e4e;
margin-top: 10px;
}
.pic-container {
display: flex;
padding: 20px 18px;
}
.pic-container {
display: flex;
padding: 20px 18px;
}
/* .pic {
/* .pic {
width: 100px;
height: 100px;
background-color: #eee;
border-radius: 4px;
} */
/* 预览遮罩层样式 */
.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-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-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>
.preview-image {
max-width: 100%;
max-height: 100%;
border-radius: 4px;
}
</style>