vue 将以下代码修改为按屏幕比例进行缩放
时保持原比例且不出现
滚动条<template>
<
div 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 target="_blank" class="app
-card" @mouseenter="hoverIndex = index"
@mouseleave="hoverIndex =
-1" @click="goIndex"
:style="{
backgroundColor
: hoverIndex === index ? '#c5edff'
: '#fff'
}">
<
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>
</el
-col>
</el
-row>
</
div>
</
div>
</template>
<script>
export default {
name
: "Home",
data() {
return {
hoverIndex
: -1,
apps
: [{
name
: '智慧应用',
icon
: 'el
-icon
-cpu',
},
{
name
: '运行监测',
icon
: 'el
-icon
-monitor',
},
{
name
: 'AI仿真',
icon
: 'el
-icon
-data
-analysis',
},
{
name
: '数据中台',
icon
: 'el
-icon
-data
-board',
}
],
redirect
: undefined
}
},
mounted() {
console.log('设备像素比：', window.devicePixelRatio);
},
methods
: {
goIndex() {
this.$router.replace({
path
: "Index"
})
}
}
}
</script>
<style scoped>
.energy
-platform {
box
-sizing
: border
-box;
padding
: 120px 260px;
width
: 100%;
height: 100%;
/* min
-height: 100vh; */
background
-image
: url('../assets/image/bg.png');
/* 背景图片
设置 */
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
: 1366px) {
.energy
-platform {
padding
: 150px 100px;
}
.app
-card {
width
: 90%;
}
}
/* 响应式调整 */
@media (
max-width
: 1024px) {
.energy
-platform {
padding
: 150px 200px;
}
.app
-card {
width
: 100%;
}
}
/* 响应式调整 */
@media (
max-height: 768px) {
.energy
-platform {
padding
: 50px 120px;
}
.app
-card {
width
: 100%;
}
}
</style>
本文解决了当内层div设置了max-height和overflow:auto时滚动条出现的问题，通过将line-height设置为normal即可修复。
扫一扫
3549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
