yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

电脑手机不同图片

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-16 22:20:43 +08:00
parent 693aad2403
commit 21a8d252e3
1 changed files with 60 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/ExampleItem.vue
View File

@ -1,73 +1,6 @@
<!--<script setup>-->
<!--import { useBootstrapBreakpoint } from './useBreakpoint.js';-->
<!--const { breakpoint } = useBootstrapBreakpoint();-->
<!--</script>-->
<template>
<div id="passageroot" class="pageroot" v-if="psginfo">
<div id="passagebanner" class="pagebanner">
<img :src="`https://cms.yangprivate.site${psginfo.headimage.formats.large.url}`"
alt="" id="bannerimg"/>
<div id="bannercontentfill"
style="width: 100%;height: 100%;
background-color: rgba(0,0,0,0.5);">
<div class="bannercontent" id="currentbanner">
<span class="banner2">{{this.psginfo.brandname_cn}}<br /></span>
<span class="banner1">{{this.psginfo.projectname_cn}}</span>
<div style="margin-bottom: 0;
width: 100%;
margin-top:
auto;bottom: 0;
color: darkgray">
<!-- <div v-if="breakpoint==='xs'||breakpoint==='sm'" id="wepbar">-->
<!-- <span class="engtitle">-->
<!-- <strong>{{this.psginfo.brandname_en}}</strong>-->
<!-- </span>-->
<!-- <span class="engproject">-->
<!-- {{this.psginfo.projectname_en}}-->
<!-- </span>-->
<!-- <span style="width: 100%"></span>-->
<!-- <span class="code">-->
<!-- {{this.psginfo.projectcode}}-->
<!-- </span>-->
<!-- </div>-->
<br/>
<div id="pcbar">
<span class="engtitle">
<strong>{{this.psginfo.brandname_en}}</strong>
</span>
<span class="engproject">
{{this.psginfo.projectname_en}}
</span>
<span style="width: 100%"></span>
<span class="code">
{{this.psginfo.projectcode}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="normalcontentdiv">
<span class="normalcontenttitle">
项目概况
</span>
<span class="normalcontenttext">
{{psginfo.content}}
</span>
</div>
<div id="imglist">
<div v-for="(item, index) in psginfo.images" :key="index"
class="imglistitem"
style="width: 100%; height: auto;">
<img :src="`https://cms.yangprivate.site${item.formats.medium.url}`" alt="" />
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import { useBootstrapBreakpoint } from './useBreakpoint.js';
export default {
name: "ExampleItem",
data(){
@ -79,6 +12,12 @@ export default {
cmsroot: 'https://cms.yangprivate.site'
}
},
setup() {
// 在setup中使用组合式API
const { breakpoint } = useBootstrapBreakpoint();
return { breakpoint }; // 返回breakpoint使其成为组件实例的一部分
},
methods:{
fetchpsginfos:function (){
this.isLoading=true;
@ -133,6 +72,59 @@ export default {
}
</script>
<template>
<div id="passageroot" class="pageroot" v-if="psginfo">
<div id="passagebanner" class="pagebanner">
<img :src="`https://cms.yangprivate.site${psginfo.mobileheadimage.formats.large.url}`"
v-if="breakpoint==='xs'||breakpoint==='sm'" alt="" id="bannerimg"/>
<img :src="`https://cms.yangprivate.site${psginfo.headimage.formats.large.url}`"
v-else alt="" id="bannerimg"/>
<div id="bannercontentfill"
style="width: 100%;height: 100%;
background-color: rgba(0,0,0,0.5);">
<div class="bannercontent" id="currentbanner">
<span class="banner2">{{this.psginfo.brandname_cn}}<br /></span>
<span class="banner1">{{this.psginfo.projectname_cn}}</span>
<div style="margin-bottom: 0;
width: 100%;
margin-top:
auto;bottom: 0;
color: darkgray">
<br/>
<div id="pcbar">
<span class="engtitle">
<strong>{{this.psginfo.brandname_en}}</strong>
</span>
<span class="engproject">
{{this.psginfo.projectname_en}}
</span>
<span style="width: 100%"></span>
<span class="code">
{{this.psginfo.projectcode}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="normalcontentdiv">
<span class="normalcontenttitle">
项目概况
</span>
<span class="normalcontenttext">
{{psginfo.content}}
</span>
</div>
<div id="imglist">
<div v-for="(item, index) in psginfo.images" :key="index"
class="imglistitem"
style="width: 100%; height: auto;">
<img :src="`https://cms.yangprivate.site${item.formats.medium.url}`" alt="" />
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@import "src/publicstyle.scss";