76 lines
1.4 KiB
Vue
76 lines
1.4 KiB
Vue
<template>
|
||
<div class="mobile-page">
|
||
<h1 class="page-title">移动端页面</h1>
|
||
<div class="test-content">
|
||
<p>这是一个测试页面，用于验证移动端样式重置是否生效。</p>
|
||
<div class="test-box">
|
||
<p>测试盒子 - 宽度应该适应屏幕</p>
|
||
</div>
|
||
<div class="button-group">
|
||
<button class="el-button el-button--primary">主要按钮</button>
|
||
<button class="el-button el-button--default">默认按钮</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
definePageMeta({
|
||
layout: 'm'
|
||
})
|
||
// Mobile specific logic can be added here
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mobile-page {
|
||
padding: 16px;
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 20px;
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.test-content {
|
||
background: #fff;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
|
||
p {
|
||
margin-bottom: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
.test-box {
|
||
width: 100%;
|
||
height: 80px;
|
||
background: #e8f4fd;
|
||
border: 1px solid #b3d8ff;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 16px 0;
|
||
|
||
p {
|
||
margin: 0;
|
||
color: #409eff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
</style>
|