将以下代码修改为响应式布局修改页面分辨率时布局仍然保持原样，不出现滚动条<template>
<div id="mainContainer" class="energy-platform">
<!-- 顶部标题 -->
<div class="header">
<h1 class="company-name">XX公司</h1>
<h2 class="platform-name">XX云综合管理平台</h2>
<div class="gradient-bar"></div> <!-- 渐变导航条 -->
</div>
<!-- 应用菜单 -->
<div class="app-container">
<el-row :gutter="20">
<el-col v-for="(app, index) in apps" :key="index" :
xs="24" :sm="12" :md="6" :lg="6">
<div v-if="app.url==&#
39;index&#
39;" target="_blank" class="app-card" @mouseenter="hoverIndex = index"
@mouseleave="hoverIndex = -1" @click="goIndex" :style="{
backgroundColor: hoverIndex === index ? &#
39;#c5edff&#
39; : &#
39;#fff&#
39;
}">
<div class="app-icon">
<img :src="require(`../
assets/image/${app.icon}.png`)" :alt="app.name" class="img-item2">
</div>
<div class="app-title">{{ app.name }}</div>
</div>
<a v-else :href="app.url" target="_blank" class="app-card" @mouseenter="hoverIndex = index"
@mouseleave="hoverIndex = -1" :style="{
backgroundColor: hoverIndex === index ? &#
39;#c5edff&#
39; : &#
39;#fff&#
39;
}">
<div class="app-icon">
<img :src="require(`../
assets/image/${app.icon}.png`)" :alt="app.name" class="img-item2">
</div>
<div class="app-title">{{ app.name }}</div>
</a>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
hoverIndex: -1,
apps: [{
name: &#
39;智慧应用&#
39;,
icon: &#
39;el-icon-cpu&#
39;,
url: &#
39;index&#
39;
},
{
name: &#
39;运行监测&#
39;,
icon: &#
39;el-icon-monitor&#
39;,
url: &#
39;&#
39;
},
{
name: &#
39;AI仿真&#
39;,
icon: &#
39;el-icon-data-analysis&#
39;,
url: &#
39;&#
39;
},
{
name: &#
39;数据中台&#
39;,
icon: &#
39;el-icon-data-board&#
39;,
url: &#
39;&#
39;
}
],
redirect: undefined,
devicePixelRatio: null,
contentStyle: {}
}
},
methods: {
goIndex() {
this.$router.replace({
path: "Index"
})
}
}
}
</script>
<style scoped>
.energy-platform {
box-sizing: border-box;
padding: 8rem 10rem;
width: 100%;
/* height: 100vh; */
min-height: 100vh;
background-image: url(&#
39;../
assets/image/bg.png&#
39;);
/* 背景
图片设置 */
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
filter: brightness(1);
}
.header {
text-align: left;
font-style: italic;
color: #fff;
font-size: 40px;
}
.company-name {
margin-bottom:
30px;
}
.company-name,
.platform-name {
text-align: left;
font-weight: bold;
margin-bottom: 20px;
color: #fff;
}
.gradient-bar {
height: 4px;
background: linear-gradient(to right, #29b0dd, #2aaed9, #ffffff);
width: 260px;
margin-bottom: 90px;
}
.app-container {
margin: 0 auto;
}
.app-card {
height: 260px;
width: 80%;
background: #fff;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.
3s ease;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.img-item2 {
width: 100%;
}
.app-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15);
}
.app-icon {
font-size: 50px;
color: #
333;
margin-bottom: 40px;
transition: all 0.
3s ease;
}
.app-card:hover .app-icon {
color: #fff;
}
.app-title {
font-size: 22px;
font-weight: bold;
color: #
333;
transition: all 0.
3s ease;
}
.app-card:hover .app-title {
color: #000;
}
/* 响应式调整 */
@media (
max-width: 768px) {
.company-name {
font-size: 40px;
}
.platform-name {
font-size: 20px;
}
.app-card {
height: 120px;
width: 100%;
}
.app-icon {
font-size:
30px;
margin-bottom: 10px;
}
.app-title {
font-size: 16px;
}
.gradient-bar {
margin-bottom: 40px;
}
}
/* 响应式调整 */
@media (
max-width: 1
366px) {
.energy-platform {
padding: 150px 100px;
}
.app-card {
width: 90%;
}
}
/* 响应式调整 */
@media (
max-width: 1024px) {
.energy-platform {
padding: 150px 200px;
}
.app-card {
width: 100%;
}
}
</style>
本文介绍了如何使用Xcode的Assets文件管理iPhone X、XR、XS Max等瘦长屏幕设备的图片，通过复制LaunchImage的Contents.json来实现，简化了针对不同机型的图片适配代码。
最低0.47元/天 解锁文章
扫一扫
858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
