电脑手机不同图片
This commit is contained in:
zhcnyuyang
parent
693aad2403
commit
21a8d252e3
@ -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>
|
<script>
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
import { useBootstrapBreakpoint } from './useBreakpoint.js';
|
||||||
export default {
|
export default {
|
||||||
name: "ExampleItem",
|
name: "ExampleItem",
|
||||||
data(){
|
data(){
|
||||||
@ -79,6 +12,12 @@ export default {
|
|||||||
cmsroot: 'https://cms.yangprivate.site'
|
cmsroot: 'https://cms.yangprivate.site'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setup() {
|
||||||
|
// 在setup中使用组合式API
|
||||||
|
const { breakpoint } = useBootstrapBreakpoint();
|
||||||
|
|
||||||
|
return { breakpoint }; // 返回breakpoint使其成为组件实例的一部分
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
fetchpsginfos:function (){
|
fetchpsginfos:function (){
|
||||||
this.isLoading=true;
|
this.isLoading=true;
|
||||||
@ -133,6 +72,59 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</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">
|
<style scoped lang="scss">
|
||||||
@import "src/publicstyle.scss";
|
@import "src/publicstyle.scss";
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user