Vue 2 项目实战：用户主页页面开发（动态展示+交互+图表） 从零开始用 Vue 2 构建用户信息与工具页面 Vue 2 教程：实现动态用户中心页面（附 ECharts 图表） 前端开发：用 Vue
发布时间
阅读量：
阅读量
效果图
🌟【定制化开发服务，让您的项目领先一步】🌟
如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户主页 - Vue 2</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px 0;
font-size: 18px;
}
.container {
max-width: 600px;
margin: 20px auto;
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.user-info {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.user-info img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 10px;
}
.user-info div {
font-size: 14px;
}
.user-info .name {
font-weight: bold;
font-size: 16px;
}
.nav-buttons {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.nav-button {
flex: 1;
text-align: center;
padding: 10px;
font-size: 14px;
color: #4CAF50;
border: 1px solid #4CAF50;
border-radius: 5px;
cursor: pointer;
margin: 0 5px;
}
.nav-button:hover {
background-color: #4CAF50;
color: white;
}
.section-title {
font-size: 16px;
font-weight: bold;
margin: 20px 0 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-item {
text-align: center;
padding: 10px;
background: #f7f8fa;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
}
.grid-item:hover {
background-color: #4CAF50;
color: white;
}
#chart {
width: 100%;
height: 200px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
用户主页
</header>
<div id="app" class="container">
<!-- 用户信息 -->
<div class="user-info">
<img :src="user.avatar" alt="用户头像">
<div>
<div class="name">{{ user.name }}</div>
<div>{{ user.location }} | {{ user.grade }}</div>
</div>
</div>
<!-- 导航按钮 -->
<div class="nav-buttons">
<div class="nav-button" v-for="button in navButtons" :key="button" @click="handleNavClick(button)">
{{ button }}
</div>
</div>
<!-- 我的订单 -->
<div>
<div class="section-title">我的订单</div>
<div class="grid">
<div class="grid-item" v-for="order in orders" :key="order">
{{ order }}
</div>
</div>
</div>
<!-- 常用工具 -->
<div>
<div class="section-title">常用工具</div>
<div class="grid">
<div class="grid-item" v-for="tool in tools" :key="tool">
{{ tool }}
</div>
</div>
</div>
<!-- 数据图表 -->
<div>
<div class="section-title">学习数据</div>
<div id="chart"></div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
user: {
name: "张三李四",
location: "北京",
grade: "小学一年级",
avatar: "https://via.placeholder.com/60",
},
navButtons: ["调课", "转班", "跨报", "关注班级"],
orders: ["购课单", "待付款", "已付款", "退款", "拼团", "讲座", "讲义邮寄"],
tools: ["课程表", "智能判题", "错题本", "旧版讲义", "诊断查分", "资讯收藏"],
},
mounted() {
this.renderChart();
},
methods: {
handleNavClick(button) {
alert(`点击了导航按钮: ${button}`);
},
renderChart() {
const chart = echarts.init(document.getElementById("chart"));
const option = {
title: { text: "学习数据", left: "center" },
tooltip: {},
xAxis: {
type: "category",
data: ["语文", "数学", "英语", "科学"],
},
yAxis: {
type: "value",
},
series: [
{
name: "成绩",
type: "bar",
data: [85, 92, 78, 90],
itemStyle: {
color: "#4CAF50",
},
},
],
};
chart.setOption(option);
},
},
});
</script>
</body>
</html>全部评论 (0)
还没有任何评论哟~