生成一个移动端列表页面框架代码 1、页面框架 ,要求必须美观,有三个节点进行变化,准备三个变量进行渲染
时间: 2023-06-01 17:04:32 浏览: 51
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>移动端列表页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
font-size: 1.2rem;
}
.list {
margin: 10px;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
.item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #f2f2f2;
}
.item img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.item h3 {
margin: 0;
font-size: 1.1rem;
}
.item p {
margin: 0;
color: #666;
font-size: 0.9rem;
}
.item span {
color: #f00;
font-weight: bold;
margin-left: auto;
}
</style>
</head>
<body>
<header class="header">{{title}}</header>
<div class="list">
<div class="item" v-for="item in list" :key="item.id">
<img :src="item.avatar" alt="avatar">
<div>
<h3>{{item.name}}</h3>
<p>{{item.desc}}</p>
</div>
<span>{{item.price}}</span>
</div>
</div>
<footer>{{footer}}</footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: 'body',
data: {
title: '移动端列表页面',
list: [
{
id: 1,
name: '商品1',
desc: '商品1的描述',
price: '¥100',
avatar: 'https://via.placeholder.com/50x50'
},
{
id: 2,
name: '商品2',
desc: '商品2的描述',
price: '¥200',
avatar: 'https://via.placeholder.com/50x50'
},
{
id: 3,
name: '商品3',
desc: '商品3的描述',
price: '¥300',
avatar: 'https://via.placeholder.com/50x50'
}
],
footer: '版权所有 © 2021'
}
});
</script>
</body>
</html>