截屏工具
截屏工具下载<<<戳这里
下载好之后解压，然后双击那个五颜六色的图标就运行了，接着按下F1就可以截屏了。
通用步骤
总结一个步骤给大家：
先划分好区域的宽高，可以设置一个背景颜色作为辅助，更加直观
把东西放进去
排列整齐（统一使用弹性盒子，一招鲜吃遍天嘛，就是横着排还是竖着排的问题）
/* 弹性盒子横着排 */ .flex_row{ display: flex; /* 排列方式：弹性盒子 */ flex-direction: row;/*排列方向：横向*/ justify-content: center;/*主轴居中*/ align-items: center;/*副轴居中*/ } /* 弹性盒子竖着排 */ .flex_column{ display: flex; /* 排列方式：弹性盒子 */ flex-direction: column;/*排列方向：纵向*/ justify-content: center;/*主轴居中*/ align-items: center;/*副轴居中*/ }
任务1：个人中心页面
标题栏
如果你是创建的是uniapp项目，标题栏的修改在pages.json里。
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "个人中心"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#1890ff",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
参考代码
<template>
<body>
<!-- 用户信息区域 -->
<div class="user_section">
<!-- 左边的头像区域 -->
<div class="user_section_left">
<image style="width: 80%;height: 80%;" src="../../static/头像.jpg" mode=""></image>
</div>
<!-- 右边的信息区域 -->
<div class="user_section_right">
<h4 style="margin-bottom: 10px;">打工人</h4>
<p style="color: gray;r">用户编号:123476578</p>
</div>
</div>
<!-- 菜单项1 -->
<div class="menu" style="margin: 10px 0;">
<!-- 左边区域 -->
<div class="menu_left">
<image style="width: 20px;height: 20px;" src="../../static/设置.png" mode=""></image>
<p>个人设置</p>
</div>
<!-- 右边的箭头区域 -->
<div class="menu_right">
<image style="width: 20px;height: 20px;" src="../../static/右箭头.png" mode=""></image>
</div>
</div>
<!-- 菜单项2 -->
<div class="menu">
<!-- 左边区域 -->
<div class="menu_left">
<image style="width: 20px;height: 20px;" src="../../static/订单.png" mode=""></image>
<p>我的订单</p>
</div>
<!-- 右边的箭头区域 -->
<div class="menu_right">
<image style="width: 20px;height: 20px;" src="../../static/右箭头.png" mode=""></image>
</div>
</div>
<!-- 菜单项3 -->
<div class="menu">
<!-- 左边区域 -->
<div class="menu_left">
<image style="width: 20px;height: 20px;" src="../../static/设置.png" mode=""></image>
<p>个人设置</p>
</div>
<!-- 右边的箭头区域 -->
<div class="menu_right">
<image style="width: 20px;height: 20px;" src="../../static/右箭头.png" mode=""></image>
</div>
</div>
<!-- 菜单项4 -->
<div class="menu">
<!-- 左边区域 -->
<div class="menu_left">
<image style="width: 20px;height: 20px;" src="../../static/设置.png" mode=""></image>
<p>个人设置</p>
</div>
<!-- 右边的箭头区域 -->
<div class="menu_right">
<image style="width: 20px;height: 20px;" src="../../static/右箭头.png" mode=""></image>
</div>
</div>
<!-- 菜单项5 -->
<div class="menu" style="margin: 10px 0;">
<!-- 左边区域 -->
<div class="menu_left">
<image style="width: 20px;height: 20px;" src="../../static/设置.png" mode=""></image>
<p>个人设置</p>
</div>
<!-- 右边的箭头区域 -->
<div class="menu_right">
<image style="width: 20px;height: 20px;" src="../../static/右箭头.png" mode=""></image>
</div>
</div>
<!-- 底部导航栏 -->
<div class="nav_section">
<div class="nav_box">
<image style="width: 30px;height: 30px;" src="../../static/首页.png" mode=""></image>
<p>首页</p>
</div>
<div class="nav_box">
<image style="width: 30px;height: 30px;" src="../../static/订单.png" mode=""></image>
<p>垃圾分类</p>
</div>
<div class="nav_box">
<image style="width: 30px;height: 30px;" src="../../static/分类.png" mode=""></image>
<p>数据分析</p>
</div>
<div class="nav_box">
<image style="width: 30px;height: 30px;" src="../../static/分类.png" mode=""></image>
<p>中国制造</p>
</div>
<div class="nav_box">
<image style="width: 30px;height: 30px;" src="../../static/个人中心.png" mode=""></image>
<p>个人中心</p>
</div>
</div>
</body>
</template>
<style>
body{
width: 100vw;
height: 200vh;
background-color: #ededed;
}
.user_section{
width: 100vw;
height: 15vh;
background-color: white;
display: flex;
flex-direction: row;
}
.user_section_left{
width: 30%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.user_section_right{
width: 70%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.menu{
height: 8vh;
width: 100vw;
background-color: white;
display: flex;
flex-direction: row;
}
.menu_left{
height: 100%;
width: 30%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.menu_right{
height: 100%;
width: 70%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.nav_section{
width: 100vw;
height: 8vh;
background-color: white;
position: fixed;
bottom: 0px;
display: flex;
flex-direction: row;
}
.nav_box{
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="./my.css"/>
</head>
<body>
<!-- 标题栏 -->
<div class="flex_row" style="width: 100vw;height: 8vh;background-color: #1890ff;">
<h4 class="white">个人设置</h4>
</div>
<!-- 菜单项 -->
<div class="flex_row menu">
<p>头像</p>
<img src="static/头像.jpg" style="width: 12vh;height: 12vh;border-radius: 20px;">
</div>
<!-- 菜单项 -->
<div class="flex_row menu">
<p>昵称</p>
<p>ss</p>
</div>
<!-- 菜单项3 -->
<div class="flex_row menu">
<div class="flex_row" style="width: 50%;height: 100%;justify-content: flex-start;">
<p>性别</p>
</div>
<div class="flex_row" style="width: 50%;height: 100%;justify-content: flex-end;">
<input type="radio" name="sex" id="" value="" />
<p style="margin-right: 10px;">男</p>
<input type="radio" name="sex" id="" value="" />
<p>女</p>
</div>
</div>
<!-- 菜单项 -->
<div class="flex_row menu">
<p>联系电话</p>
<p>1234561*****</p>
</div>
<!-- 保存按钮 -->
<button type="button" class="white" style="width: 95vw;margin-left: 2.5vw;padding: 10px;font-size: large;border: #EDEDED 1px solid;margin-top: 10px;background-color: #007aff;border-radius: 10px;">保存</button>
</body>
</html>
<style type="text/css">
.menu{
box-sizing: border-box;justify-content: space-between;padding: 15px 20px;width: 100vw;border-bottom: #efefef 2px solid;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="./my.css"/>
</head>
<body>
<!-- 标题栏 -->
<div class="flex_row" style="width: 100vw;height: 7vh;background-color: #1890FF;">
<h4 style="color: white;">我的订单</h4>
</div>
<!-- 分类选项卡 -->
<div class="flex_row" style="width: 100vw;height: 8vh;border-bottom: #EFEFEF 2px solid;">
<div class="flex_row" style="border-bottom: #1890FF 4px solid; width: 50%;height: 100%;">
<p style="font-size: large;">未支付</p>
</div>
<div class="flex_row" style="width: 50%;height: 100%;">
<p style="font-size: large;">已支付</p>
</div>
</div>
<!-- 卡片 -->
<div class="flex_column" style="width: 90vw;margin:2.5vw 5vw;border: #EFEFEF 1px solid;box-shadow:5px 5px 5px 0 #EFEFEF;padding:10px 20px;box-sizing: border-box;">
<div class="flex_row box" style="justify-content: space-between;">
<p>订单号：123456</p>
<p style="color: red;font-weight: bold;">￥8</p>
</div>
<div class="flex_row" style="margin: 10px 0;">
<p style="font-size: 1.5em;">光谷金融街 → 南湖大厦</p>
</div>
<div class="flex_row box" style="justify-content: space-between;">
<p>路线</p>
<p>一号线</p>
</div>
<div class="flex_row box" style="justify-content: space-between;">
<p>乘车人</p>
<p>ss</p>
</div>
<div class="flex_row box" style="justify-content: space-between;">
<p>联系方式</p>
<p>123456789</p>
</div>
<div class="flex_row box" style="justify-content: space-between;">
<p>乘车时间</p>
<p>25.123-54645</p>
</div>
<div class="flex_row box" style="justify-content: flex-end;border-bottom: 0;">
<button type="button" style="padding: 5px 10px;border-radius: 5px;background-color: #1890FF;color: white;border: 1px #F0F8FF solid;">立即支付</button>
</div>
</div>
</body>
</html>
<style type="text/css">
.box{
width: 100%;
padding: 10px;
border-bottom: #EFEFEF 2px solid;
}
</style>任务2：门诊预约界面设计
2-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="./my.css"/>
</head>
<body>
<!-- 标题栏 -->
<div class="flex_row" style="width: 100vw;height: 7vh;background-color: #1890FF;">
<h4 class="white">门诊预约</h4>
</div>
<!-- 搜索框 -->
<div class="flex_row" style="width: 100vw;height: 8vh;background-color: #EDEDED;">
<input placeholder="请输入搜索内容" class="search_input" style="width: 100%;" type="" name="" id="" value="" />
</div>
<div class="flex_row" style="width: 100vw;height: 12vh;border-bottom: 2px #EFEFEF solid;padding: 10px;box-sizing: border-box;">
<div class="flex_row" style="width: 40%;height: 100%;background-color: #1890FF;">
<img src="./static/扫码.png" style="width: 80%;height: 80%;">
</div>
<div class="flex_row" style="width: 60%;height: 100%;background-color: aqua;">
<p style="margin-right: 5px;">儿童医院</p>
<img src="static/星星黄色.png" style="width: 1em;">
<img src="static/星星黄色.png" style="width: 1em;">
<img src="static/星星黄色.png" style="width: 1em;">
<img src="static/星星灰色.png" style="width: 1em;">
<img src="static/星星灰色.png" style="width: 1em;">
<button type="button" style="margin-left: 5px;padding: 5px;color: gray;">按钮</button>
</div>
</div>
</body>
</html>
<style type="text/css">
/* .search_input::placeholder{
text-align: center;
} */
/* .search_input:not(:focus){
background-image: url(static/搜索.png);
background-size: 1em 1em;
background-repeat: no-repeat;
background-position: center;
} */
.search_input{
background-image: url(static/搜索.png);
background-size: 1.5em 1.5em;
background-repeat: no-repeat;
background-position: 10px center;
padding-left: 30px;
}
</style>2-2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body style="height: 100vh;">
<!-- 标题栏 -->
<div class="flex_row" style="width: 100vw;height: 8vh;background-color: #1890FF;">
<h4 class="white">医院详情</h4>
</div>
<!-- banner -->
<img src="static/分类.png" style="width: 95vw;margin-left: 2.5vw;height: 20vh;">
<!-- content -->
<div class="flex_row" style="text-indent: 2em; align-items: flex-start; min-height: 50vh; width: 90vw;margin-left: 5vw;box-shadow: 0px 0px 5px 0px #808080;padding: 10px;box-sizing: border-box; ">
<p>奥施康定拉师傅就开始福建烤老鼠嘎到家了萨更好的就合力攻坚花费多少非结构化奥施康定拉师傅就开始福建烤老鼠嘎到家了萨更好的就合力攻坚花费多少非结构化奥施康定拉师傅就开始福建烤老鼠嘎到家了萨更好的就合力攻坚花费多少非结构化奥施康定拉师傅就开始福建烤老鼠嘎到家了萨更好的就合力攻坚花费多少非结构化奥施康定拉师傅就开始福建烤老鼠嘎到家了萨更好的就合力攻坚花费多少非结构化奥施康定拉师傅就开始福建烤老鼠嘎到家了萨更好的就合力攻坚花费多少非结构化</p>
</div>
<!-- 按钮 -->
<div class="flex_row" style="width: 100vw;">
<button style="box-sizing: border-box; padding: 20px 0;font-size: large;color: white;border-radius: 20px;margin-top: 5vh; width: 95vw;margin-left: 2.5vw;background-color: #1890FF;" type="button">
预约挂号
</button>
</div>
</body>
</html>任务3：数字图书馆界面设计
3-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./my.css"/>
</head>
<body>
<!-- 标题栏 -->
<div class="flex_row" style="width: 100vw;height: 7vh;background-color: #1890FF;">
<h4 class="white">数字图书馆</h4>
</div>
<!-- 卡片 -->
<div class="flex_column" style="background: linear-gradient(to bottom,#b3dbe8 10%,white 40%);padding: 5px;box-sizing: border-box;border-radius: 10px; width: 90vw;margin: 2.5vw 5vw;border: #EDEDED 2px solid;box-shadow: 5px 5px 5px 0 #EFEFEF;">
<!-- 上部分 -->
<div class="flex_row" style="width: 100%;height: 6vh; justify-content: space-between;border-bottom: #1890FF 1px solid;">
<p>贵港市图书馆</p>
<p>营业中</p>
</div>
<!-- 下部分 -->
<div class="flex_row" style="width: 100%;padding: 5px;">
<!-- 左边图片 -->
<div class="flex_row" style="width: 40%;height: 100%;">
<img src="static/分类.png" style="width: 100%;">
</div>
<!-- 右边文字 -->
<div class="flex_column">
<div class="flex_row" style="width: 100%;">
<img src="static/意见反馈.png" style="width: 1em;margin-right: 5px;">
<p>阿萨德撒富士康返回数据看到过环境肯定市规划局卡拉很快就</p>
</div>
<div class="flex_row" style="line-height: 1.5em; width: 100%;justify-content: flex-start;">
<p>开放时间：每天睡到大四大皆空</p>
</div>
</div>
</div>
</div>
</body>
</html>新平台第一套（时代楷模）css+JavaScript
登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>
<!-- 标题栏 -->
<div class="flex_row" style="width: 100vw;height: 7vh;background-color: white;">
<h4>智慧城市</h4>
</div>
<!-- 输入框 -->
<div class="flex_column" style="margin-top: 15px; width: 100vw;background-color: white">
<!-- 账号 -->
<div class="flex_row" style="border-bottom: 1px solid lightgray; width: 100%;">
<div class="flex_row" style="width: 15%;">
<p>账号</p>
</div>
<div class="flex_row" style="width: 85%;">
<input placeholder="请输入账号" type="text" name="" id="username" value="" />
</div>
</div>
<!-- 密码 -->
<div class="flex_row" style="width: 100%;">
<div class="flex_row" style="width: 15%;">
<p>密码</p>
</div>
<div class="flex_row" style="width: 85%;">
<input placeholder="请输入密码" type="password" name="" id="password" value="" />
</div>
</div>
</div>
<!-- 自动登录 -->
<div class="flex_row" style="padding: 10px;box-sizing: border-box; width: 100vw;background-color: white;margin-top: 10px;">
<div class="flex_row" style="justify-content: flex-start; width: 50%;">
<p>自动登录</p>
</div>
<div class="flex_row" style="justify-content: flex-end; width: 50%;">
<p>是</p>
<input checked style="margin-right: 10px;" type="radio" name="auto" id="" value="" />
<p>否</p>
<input type="radio" name="auto" id="" value="" />
</div>
</div>
<!-- 登录按钮 -->
<button id="login_button" class="flex_row" style="border: 0; padding: 10px;box-sizing: border-box;font-size: large;color: white;border-radius: 6px;margin-top: 30px; width: 95vw;margin-left: 2.5vw;background-color:#007aff ;">
登录
</button>
<!-- 注册账号 -->
<div class="flex_row" style="margin-top: 20px; width: 100vw;">
<a href="signup.html" style="border-right: gray 1px solid;padding-right: 10px;margin-right: 10px;">注册账号</a>
<a href="#">忘记密码</a>
</div>
<!-- 底部的图标 -->
<div class="flex_row" style="position: fixed;bottom: 20px; width: 100vw;justify-content: space-evenly;">
<img src="./static/qq.png" class="big_icon">
<img src="./static/weixin.png" class="big_icon">
<img src="./static/sinaweibo.png" class="big_icon">
</div>
</body>
</html>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 获取输入框
const username = document.querySelector('#username')
const password = document.querySelector('#password')
const cpassword = document.querySelector('#cpassword')
// 选中登录按钮、并且给这个按钮添加一个点击事件
const login_button = document.querySelector('#login_button')
login_button.addEventListener('click',function(){
// 前端参数校验
if (username.value.trim() == '') {
alert('请输入用户名')
return
}
if (password.value.trim() == '') {
alert('请输入密码')
return
}
// 发送请求
const data = {
username:username.value,
password:password.value,
}
data_json = JSON.stringify(data)
$.ajax({
url:'http://103.170.72.126:8088/prod-api/api/login',
type:'post',
dataType:'json',
data:data_json,
contentType:'application/json',
success:function(res){
console.log(res)
alert(res.msg)
if (res.code == 200) {
// 保存token到本地缓存
localStorage.setItem('token',res.token)
// const token = localStorage.getItem('token')
// console.log(token);
location.href = 'main.html'
}
}
})
})
</script>
<style type="text/css">
body{
background-color: #efeff4;
}
input:focus{
border: 0;
outline: 0;
}
input{
padding: 10px;
border: 0;
font-size: medium;
}
</style>首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="my.css"/>
<style type="text/css">
ul li{
width: 10px;
height: 10px;
background-color: gray;
margin-left: 10px;
border-radius: 50%;
}
.active{
background-color: white;
width: 15px;
height: 15px;
}
</style>
</head>
<body style="background-color: #f6f6f6;overflow-x: hidden;">
<!-- 标题 -->
<div class="flex_row" style="width: 100vw;height: 8vh;background-color: white;">
<h3 style="color: red;">时代楷模</h3>
</div>
<!-- 标题2 -->
<div class="flex_row" style="width: 100vw;height: 6vh;background-color: #c3050f;">
<h4 style="color: white;">学习雷锋同志，弘扬雷锋精神</h4>
</div>
<!-- 幻灯片 -->
<div class="flex_row" style="width: 100vw;height: 50vw;position: relative;">
<img id="banner" src="http://103.170.72.126:8088/prod-api/profile/upload/2023/04/25/c08bf137-ceea-4662-9969-0285bc519f04.jpg" style="width: 100%;height: 100%;">
<p id="banner_title" style="position: absolute;left: 20px;bottom: 20px;color: white;font-size: larger;">党建图片1</p>
<!-- 四个小点 -->
<ul class="flex_row" style="position: absolute;bottom: 20px;right: 20px;list-style-type: none;">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 楷模公告 -->
<div class="flex_row" style="width: 95vw;margin: 2.5vw;padding: 10px;box-sizing: border-box;background-color: white;border-radius: 10px;">
<div class="flex_column" style="margin-right: 10px; width: 20%;height: 100%;border-right: 1px gray solid;">
<h4 style="color: red;">楷模</h4>
<h4>公告</h4>
</div>
<div class="flex_column" style="align-items: flex-start; width: 70%;height: 100%;">
<p id="km_title" style="font-size: larger;line-height: 1.5em;">按时艰苦大师傅艰苦管道焊接六十多个回复</p>
<p id="km_content" style="color: gray;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">大概几点所发生的更sasfsfdfs何况反馈给电话</p>
</div>
<div class="flex_row" style="width: 10%;height: 100%;">
<img src="static/homeicon/arrownred.png" class="small_icon">
</div>
</div>
<!-- 六宫格 -->
<div class="flex_row" style="flex-wrap: wrap; width: 95vw;margin: 5vw 2.5vw;background-color: white;border-radius: 10px;">
<div class="flex_column" style="padding:5px 20px;box-sizing: border-box;width: 33%;">
<img src="static/icon/kaimoliebiao.png" style="width: 4em;">
<p>楷模列表</p>
</div>
<div class="flex_column" style="padding:5px 20px;box-sizing: border-box;width: 33%;">
<img src="static/icon/yingxionggushi.png" style="width: 4em;">
<p>英雄故事</p>
</div>
<div class="flex_column" style="padding:5px 20px;box-sizing: border-box;width: 33%;">
<img src="static/icon/shenbian.png" style="width: 4em;">
<p>身边英雄</p>
</div>
<div class="flex_column" style="padding:5px 20px;box-sizing: border-box;width: 33%;">
<img src="static/icon/wuzi.png" style="width: 4em;">
<p>物资捐献</p>
</div>
<div class="flex_column" style="padding:5px 20px;box-sizing: border-box;width: 33%;">
<img src="static/icon/shuju1.png" style="width: 4em;">
<p>数据分析</p>
</div>
<div class="flex_column" style="padding:5px 20px;box-sizing: border-box;width: 33%;">
<img src="static/icon/心得1.png" style="width: 4em;">
<p>更多</p>
</div>
</div>
<!-- 楷模列表标题 -->
<div class="flex_row" style="justify-content: flex-start; width: 100vw;">
<h3 style="border-left: 3px red solid;margin-left: 10px;padding-left: 10px;">楷模列表</h3>
</div>
<!-- 楷模列表 -->
<div id="km_list">
</div>
<!-- 楷模列表的查看更多 -->
<div class="flex_row" style="width: 100vw;margin-bottom: 50px;">
<button id="more_button" type="button" class="but_blue">查看更多</button>
</div>
<!-- 底部导航栏 -->
<div class="flex_row" style="position: fixed;bottom: 0; width: 100vw;background-color: white;">
<!-- 首页 -->
<a href="main.html" style="width: 25%;">
<div class="flex_column">
<img src="./static/icon/首页1.png" style="width: 2em;height: 2em;">
<p style="color: red;font-size: small;">首页</p>
</div>
</a>
<!-- 公益 -->
<a href="gongyi.html" style="width: 25%;">
<div class="flex_column">
<img src="./static/icon/心得.png" style="width: 2em;height: 2em;">
<p style="color: gray;font-size: small;">公益</p>
</div>
</a>
<!-- 心得 -->
<a href="xinde.html" style="width: 25%;">
<div class="flex_column">
<img src="./static/icon/心得.png" style="width: 2em;height: 2em;">
<p style="color: gray;font-size: small;">心得</p>
</div>
</a>
<a href="data.html" style="width: 25%;">
<div class="flex_column">
<img src="./static/icon/首页.png" style="width: 2em;height: 2em;">
<p style="color: gray;font-size: small;">数据分析</p>
</div>
</a>
</div>
</body>
</html>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 从缓存中获取token
const token = localStorage.getItem('token')
console.log(token);
// 查看更多
const more_button = document.querySelector('#more_button')
let start = 5
more_button.addEventListener('click',function(){
for(let i = start; i<start+5 ;i++){
if (i < km_list_data.length) {
console.log(i);
km_list_html +=
`
<div class="flex_row" style="width: 95vw;margin: 2.5vw;background-color: white;border-radius: 10px;padding: 10px;box-sizing: border-box;">
<!-- 图片 -->
<div class="flex_row" style="width: 30%;">
<img src="${'http://103.170.72.126:8088/prod-api/' + km_list_data[i].imgUrl}" style="width: 100%;">
</div>
<!-- 文字 -->
<div class="flex_column" style="align-items: flex-start; width: 70%;padding: 10px;box-sizing: border-box;">
<p style="line-height: 1.5em; width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${km_list_data[i].title}</p>
<p style="line-height: 1.5em;color: gray;">楷模姓名：${km_list_data[i].name}</p>
<p style="line-height: 1.5em;color: gray; width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${km_list_data[i].content}</p>
</div>
</div>
`
}else{
more_button.style.display = 'none'
break
}
}
start += 5
km_list.innerHTML = km_list_html
})
// 楷模列表
const km_list = document.querySelector('#km_list')
let km_list_html = ''
$.ajax({
url:'http://103.170.72.126:8088/prod-api/api/model/list',
type:'get',
dataType:'json',
headers:{
Authorization:token
},
success:function(res){
console.log('楷模列表',res);
km_list_data = res.rows
for(let i = 0; i<5 ;i++){
console.log(i);
km_list_html +=
`
<div class="flex_row" style="width: 95vw;margin: 2.5vw;background-color: white;border-radius: 10px;padding: 10px;box-sizing: border-box;">
<!-- 图片 -->
<div class="flex_row" style="width: 30%;">
<img src="${'http://103.170.72.126:8088/prod-api/' + km_list_data[i].imgUrl}" style="width: 100%;">
</div>
<!-- 文字 -->
<div class="flex_column" style="align-items: flex-start; width: 70%;padding: 10px;box-sizing: border-box;">
<p style="line-height: 1.5em; width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${km_list_data[i].title}</p>
<p style="line-height: 1.5em;color: gray;">楷模姓名：${km_list_data[i].name}</p>
<p style="line-height: 1.5em;color: gray; width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${km_list_data[i].content}</p>
</div>
</div>
`
}
km_list.innerHTML = km_list_html
}
})
// 楷模公告
// const km_title = document.querySelector('#km_title')
// const km_content= document.querySelector('#km_content')
// $.ajax({
// url:'http://103.170.72.126:8088/appNotice/app-o/modelNotice',
// type:'get',
// dataType:'json',
// success:function(res){
// console.log('楷模公告',res);
// km_title.innerText = res.data[0].title
// km_content.innerText = res.data[0].content
// }
// })
// 幻灯片
const banner = document.querySelector('#banner')
const banner_title = document.querySelector('#banner_title')
$.ajax({
url:'http://103.170.72.126:8088/prod-api/api/building/banner/list',
type:'get',
dataType:'json',
headers:{
Authorization:token
},
success:function(res){
// 登录信息过期判断
if(res.code == 401){
alert('登录信息过期')
location.href = 'login.html'
}
console.log('轮播图',res);
let index = 1
setInterval(function(){
console.log(index);
// 切换小圆点
document.querySelector('.active').classList.remove('active')
document.querySelector(`ul li:nth-child(${index+1})`).classList.add('active')
// 切换幻灯片
banner.src = 'http://103.170.72.126:8088/prod-api/' + res.rows[index].imgUrl
banner_title.innerText = res.rows[index].title
index ++
if (index == 4) {
index = 0
}
},2000)
}
})
</script>心得页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="my.css"/>
<style type="text/css">
.active{
color: red !important;
border-bottom: #FF0000 3px solid;
}
</style>
</head>
<body>
<!-- 标题栏 -->
<div class="flex_row" style="width: 100vw;height: 8vh;background-color: white;">
<h3>学习心得</h3>
</div>
<!-- 选项卡 -->
<div class="flex_row" style="width: 100vw;height: 7vh;background-color: white;">
<div id="xxk1" class="flex_row active" style="width: 50%;height: 100%;color: gray;">
<p style="font-weight: bolder;">学习感言</p>
</div>
<div id="xxk2" class="flex_row" style="width: 50%;height: 100%;color: gray;">
<p style="font-weight: bolder;">学习历史</p>
</div>
</div>
<!-- 学习感言区域 -->
<div id="ganyan_section" style="width: 100vw;display: none;margin-bottom: 50px;">
<div id="ganyan_list">
</div>
<!-- 新建感言按钮 -->
<a href="xinde_new_ganyan.html">
<div class="flex_row" style="width: 100vw;">
<button class="but_blue" type="button" style="background-color: #FF0000; position: fixed;bottom: 100px;">新建感言</button>
</div>
</a>
</div>
<!-- 学习历史区域 -->
<div id="lishi_section" style="width: 100vw;display: block;">
<div id="lishi_list" style="margin-bottom: 50px;">
</div>
</div>
<!-- 底部导航栏 -->
<div class="flex_row" style="position: fixed;bottom: 0; width: 100vw;background-color: white;">
<!-- 首页 -->
<a href="main.html" style="width: 25%;">
<div class="flex_column">
<img src="./static/icon/首页.png" style="width: 2em;height: 2em;">
<p style="color: gray;font-size: small;">首页</p>
</div>
</a>
<!-- 公益 -->
<a href="gongyi.html" style="width: 25%;">
<div class="flex_column">
<img src="./static/icon/心得.png" style="width: 2em;height: 2em;">
<p style="color: gray;font-size: small;">公益</p>
</div>
</a>
<!-- 心得 -->
<a href="xinde.html" style="width: 25%;">
<div class="flex_column">
<img src="./static/icon/心得1.png" style="width: 2em;height: 2em;">
<p style="color: red;font-size: small;">心得</p>
</div>
</a>
<a href="data.html" style="width: 25%;">
<div class="flex_column">
<img src="./static/icon/首页.png" style="width: 2em;height: 2em;">
<p style="color: gray;font-size: small;">数据分析</p>
</div>
</a>
</div>
</body>
</html>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const token = localStorage.getItem('token')
const userId = localStorage.getItem('userId')
// // 编辑笔记按钮
// function edit_note(){
// }
// 获取学习历史列表
function get_lishi_list(){
$.ajax({
url:'http://103.170.72.126:8088/prod-api/api/history/list',
type:'get',
dataType:'json',
headers:{
Authorization:token
},
data:{
userId:userId,
pageNum:1,
pageSize:50
},
success:function(res){
console.log('学习历史列表',res);
if(res.code == 401){
alert('请先登录')
location.href = 'login.html'
}
const lishi_list_data = res.rows
let lishi_list_html = ''
for (let i=0;i<lishi_list_data.length;i++){
lishi_list_html += `
<div class="flex_column" style="width: 95%;margin: 2.5%; background-color: white;padding: 10px;box-sizing: border-box;border-radius: 8px;">
<div class="flex_column" style="padding-bottom: 10px; border-bottom: #808080 1px solid; align-items: flex-start;width: 100%;">
<p class="over" style="line-height: 2em;">${lishi_list_data[i].title}</p>
<p class="over" style="line-height: 1.5em; color: gray;font-size: smaller;">${lishi_list_data[i].issueTime}</p>
<p class="over" style="line-height: 1.5em; color: gray;font-size: smaller;">${lishi_list_data[i].content}</p>
</div>
<!-- 添加笔记按钮 -->
<div data-noteid="${lishi_list_data[i].wstudyNote?lishi_list_data[i].wstudyNote.noteId:'没有'}" id="add_button" class="flex_row" style="width: 100%;margin-top: 10px;">
<img data-noteid="${lishi_list_data[i].wstudyNote?lishi_list_data[i].wstudyNote.noteId:'没有'}" src="static/experience/experience_add.png" style="width: 1em;">
<p data-noteid="${lishi_list_data[i].wstudyNote?lishi_list_data[i].wstudyNote.noteId:'没有'}" style="color: #FF0000;margin-left: 5px;line-height: 3em;">添加笔记</p>
</div>
<!-- 编辑笔记区域 -->
<div id="edit_section" class="flex_column" style="margin-top: 10px; display: none; width: 100%;">
<div class="flex_row" style="justify-content: space-between; width: 100%;">
<p>学习笔记</p>
<p style="color: red;">删除</p>
</div>
<div class="flex_row" style="width: 100%;">
<textarea id="note_input" rows="4" style="width: 100%;background-color: #f6f6f6;"></textarea>
</div>
<!-- 编辑笔记按钮 -->
<div class="flex_row" style="width: 100%;border-top: #808080 1px solid;margin-top: 10px;">
<img src="static/experience/experience_edit.png" style="width: 1em;">
<p style="color: #f0b35f;margin-left: 5px;line-height: 3em;">编辑笔记</p>
</div>
</div>
</div>
`
}
document.querySelector('#lishi_list').innerHTML = lishi_list_html
unfold()
}
})
}
// 展开编辑笔记
function unfold(){
const add_button_list = document.querySelectorAll('#add_button')
const edit_section_list = document.querySelectorAll('#edit_section')
const note_input_list = document.querySelectorAll('#note_input')
for (let i=0 ; i<add_button_list.length; i++){
add_button = add_button_list[i]
// 添加笔记按钮的点击事情
add_button.addEventListener('click',function(e){
console.log(e.target.dataset.noteid);
edit_section_list[i].style.display = 'block'
add_button_list[i].style.display = 'none'
if(e.target.dataset.noteid != '没有'){
$.ajax({
url:'http://103.170.72.126:8088/prod-api/api/history/note/'+e.target.dataset.noteid,
type:'get',
dataType:'json',
headers:{
Authorization:token
},
success:function(res){
console.log('笔记详情',res);
note_input_list[i].innerHTML = res.data.noteContent
}
})
}
})
}
}
// 选项卡切换
const xxk1 = document.querySelector('#xxk1')
const xxk2 = document.querySelector('#xxk2')
const ganyan_section = document.querySelector('#ganyan_section')
const lishi_section = document.querySelector('#lishi_section')
xxk1.addEventListener('click',function(){
xxk1.classList.add('active')
xxk2.classList.remove('active')
ganyan_section.style.display = 'block'
lishi_section.style.display = 'none'
})
xxk2.addEventListener('click',function(){
xxk2.classList.add('active')
xxk1.classList.remove('active')
ganyan_section.style.display = 'none'
lishi_section.style.display = 'block'
})
// 获取学习感言列表
const ganyan_list = document.querySelector('#ganyan_list')
$.ajax({
url:'http://103.170.72.126:8088/prod-api/api/testimonials/list',
type:'get',
dataType:'json',
headers:{
Authorization:token
},
data:{
pageNum:1,
pageSize:10
},
success:function(res){
console.log('学习感言',res);
localStorage.setItem('userId',res.rows[0].userId)
const userId = localStorage.getItem('userId')
get_lishi_list()
// token失效
if(res.code == 401){
alert('登录信息过期')
location.href = 'login.html'
}
const gy_list_data = res.rows
let html = ''
for (let i=0 ; i<gy_list_data.length ;i++){
html += `
<!-- item -->
<div class="flex_column" style="align-items: flex-start; width: 95vw;margin: 2.5vw;padding: 15px;box-sizing: border-box;border-radius: 8px;background-color: white;">
<p style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 2em;">${gy_list_data[i].title}</p>
<p style="color: gray;font-size: smaller;">${gy_list_data[i].content}</p>
<button data-id="${gy_list_data[i].id}" id="del_but" type="button" class="but_blue" style="background-color: red;width: 20vw;">删除</button>
</div>
`
}
// console.log(html);
ganyan_list.innerHTML = html
// 删除感言
const del_but_list = document.querySelectorAll('#del_but')
for (let i=0;i<del_but_list.length;i++){
const del_but = del_but_list[i]
del_but.addEventListener('click',function(e){
console.log(e.target.dataset.id);
const ganyan_id = e.target.dataset.id
$.ajax({
url:'http://103.170.72.126:8088/prod-api/api/testimonials/'+ganyan_id,
type:'DELETE',
dataType:'json',
headers:{
Authorization:token
},
success:function(res){
console.log('删除感言',res);
if (res.code == 200) {
alert('删除成功')
location.reload()
}
}
})
})
}
}
})
</script>新平台第一套（时代楷模）mui+vue
模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<script src="./js/vue.min.js"></script>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<div id="root">
<!-- 标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<!-- 主体 -->
<div class="mui-content">
</div>
</div>
<script>
new Vue({
el:'#root',
data:{
aaa:1123
},
methods: {
get_data() {
mui.ajax('http://103.170.72.126:8088',{
data:{
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
console.log(data);
if(data.code == 401){
mui.openWindow('login.html')
}
},
error:function(xhr,type,errorThrown){
}
});
}
},
mounted(){
this.get_data()
}
})
</script>
</body>
</html>登录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<script src="./js/vue.min.js"></script>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<div id="root">
<!-- 标题 -->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<!-- 主体 -->
<div class="mui-content">
<!-- mf -->
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名" v-model="username">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-clear" placeholder="请输入密码" v-model="password">
</div>
</form>
<button @click="login()" type="button" style="width: 90%;margin: 5%;"
class="mui-btn mui-btn-blue mui-btn-block">登录</button>
</div>
</div>
<script>
new Vue({
el:'#root',
data:{
username:'',
password:''
},
methods: {
login() {
// 非空校验
// if (this.username.length == 0 || this.password.length == 0) {
// mui.toast('内容不能为空')
// return
// }
// 发送请求
mui.ajax('http://103.170.72.126:8088/prod-api/api/login',{
data:{
username:'test01',
password:'123456'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/json'
},
success:function(data){
console.log(data);
mui.toast(data.msg)
// 登录成功保存登录凭证
if (data.code == 200) {
localStorage.setItem('token',data.token)
mui.openWindow('index.html')
}
},
error:function(xhr,type,errorThrown){
}
});
}
},
mounted(){
this.login()
}
})
</script>
</body>
</html>首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<script src="./js/vue.min.js"></script>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<div id="root">
<!-- 标题 -->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<!-- 主体 -->
<div class="mui-content">
<!-- 轮播图 -->
<!-- 进入App主页面（主页）上方显示轮播图 -->
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item" v-for="(i,index) in banners">
<a href="#">
<img :src="'http://103.170.72.126:8088/prod-api/'+i.imgUrl">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<!-- 显示App各领域应用服务入口，
以图标和名称为单元宫格方式显示，
手机端每行显示3个，
包括楷模列表、英雄故事、身边英雄、物资捐赠、数据分析。
每个领域应用入口布局显示为圆形图标+名称布局，
点击图标可进入对应的领域应用页面 -->
<!-- 九宫格 -->
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="./kmlb.html">
<img style="width: 50%;" src="./static/楷模列表.png" alt="" />
<div class="mui-media-body">楷模列表</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="./yxgs.html">
<img style="width: 50%;" src="./static/英雄故事.png" alt="" />
<div class="mui-media-body">英雄故事</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="./sbyx.html">
<img style="width: 50%;" src="./static/身边英雄.png" alt="" />
<div class="mui-media-body">身边英雄</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="./wzjx.html">
<img style="width: 50%;" src="./static/物资捐赠.png" alt="" />
<div class="mui-media-body">物资捐赠</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="./sjfx.html">
<img style="width: 50%;" src="./static/心得1.png" alt="" />
<div class="mui-media-body">数据分析</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<img style="width: 50%;" src="./static/更多.png" alt="" />
<div class="mui-media-body">更多</div>
</a>
</li>
</ul>
<!-- 下方显示热点楷模新闻信息列表，
新闻列表内容包括标题、楷模姓名、
新闻缩略图、内容（字数过多使用...代替）等，
默认显示5条，
新闻列表下方显示
“查看更多”按钮，点击“查看更多”按钮多显示5条楷模新闻信息 -->
<!-- 楷模新闻 -->
<ul class="mui-table-view">
<li v-if="index<page_size" v-for="(i,index) in newss" class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img style="width: 25vw;max-width: 25vw;height: 25vw;"
class="mui-media-object mui-pull-left"
:src="'http://103.170.72.126:8088/prod-api/'+i.imgUrl">
<div class="mui-media-body">
<div>{{i.title}}</div>
<p>楷模姓名：{{i.name}}</p>
<p class="mui-ellipsis-2">{{i.content}}</p>
</div>
</a>
</li>
</ul>
<button @click="page_size+=5" type="button" class="mui-btn mui-btn-blue mui-btn-block"
style="width: 90%;margin: 5%;margin-bottom: 10vh;">查看更多</button>
<!-- 显示底部导航栏，采用图标加文字方式显示，
图标在上，文字在下，共四个图标分别为首页、公益、心得、数据分析，
点击标签进入对应页面，并颜色标记当前页面所在导航栏 -->
<!-- mt -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" onclick="mui.openWindow('index.html')">
<span class="mui-icon" style="background-image: url('./static/首页1.png');background-size: cover;"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" onclick="mui.openWindow('gongyi.html')">
<span class="mui-icon" style="background-image: url('./static/公益.png');background-size: cover;"></span>
<span class="mui-tab-label">公益</span>
</a>
<a class="mui-tab-item" onclick="mui.openWindow('xinde.html')">
<span class="mui-icon" style="background-image: url('./static/心得.png');background-size: cover;"></span>
<span class="mui-tab-label">心得</span>
</a>
<a class="mui-tab-item" onclick="mui.openWindow('sjfx.html')">
<span class="mui-icon" style="background-image: url('./static/我的.png');background-size: cover;"></span>
<span class="mui-tab-label">数据分析</span>
</a>
</nav>
</div>
</div>
<script>
new Vue({
el:'#root',
data:{
banners:[],
newss:[],
pageNum:2,
page_size:5
},
methods: {
// 查看更多
more(){
// mui.ajax('http://103.170.72.126:8088/prod-api/api/model/list',{
// data:{
// pageNum:this.pageNum,
// pageSize:5
// },
// dataType:'json',//服务器返回json格式数据
// type:'get',//HTTP请求类型
// timeout:10000,//超时时间设置为10秒；
// headers:{
// // 'Content-Type':'application/json',
// 'Authorization':localStorage.getItem('token')
// },
// success:(data)=>{
// if (data.code == 200) {
// this.newss = this.newss.concat(data.rows)
// console.log('楷模新闻列表',this.newss);
// this.pageNum ++
// }
// },
// error:function(xhr,type,errorThrown){
// }
// });
},
get_data() {
// 首页轮播图
mui.ajax('http://103.170.72.126:8088/prod-api/api/building/banner/list',{
data:{
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
console.log(data);
if(data.code == 401){
mui.openWindow('login.html')
}
if (data.code == 200) {
this.banners = data.rows
console.log('轮播图',this.banners);
}
},
error:function(xhr,type,errorThrown){
}
});
// 楷模新闻列表
mui.ajax('http://103.170.72.126:8088/prod-api/api/model/list',{
data:{
// pageNum:1,
// pageSize:5
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
if (data.code == 200) {
this.newss = data.rows
console.log('楷模新闻列表',this.newss);
}
},
error:function(xhr,type,errorThrown){
}
});
}
},
mounted(){
this.get_data()
// 轮播图自动轮播
setTimeout(function(){
mui('.mui-slider').slider({
interval:1000
})
},1000)
}
})
</script>
</body>
</html>公益
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<script src="./js/vue.min.js"></script>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<div id="root">
<!-- 标题 -->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">公益</h1>
</header>
<!-- 主体 -->
<div class="mui-content">
<!-- 进入公益活动界面，界面内包括活动展示、活动报名 -->
<!-- mt -->
<div class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">活动展示</a>
<a class="mui-control-item" href="#item2">活动报名</a>
</div>
<!-- 活动展示 -->
<!-- 活动展示内容包括报名人数、活动大图、
活动起止时间、发起方简介、“报名”按钮等 -->
<div class="mui-control-content mui-active" id="item1">
<div class="mui-card" v-for="(i,index) in huodongs">
<div class="mui-card-content">
<img :src="'http://103.170.72.126:8088/prod-api/'+i.imgUrl" style="width: 100%;" alt="" />
</div>
<div class="mui-card-header flex_column" style="width: 100%; align-items: flex-start;">
<div class="mui-ellipsis">{{i.activityName}}</div>
<p>活动时间:{{i.startEndTime}}</p>
<p style="width: 100%;" class="mui-ellipsis">简介：{{i.briefIntroduction}}</p>
<p>报名截止时间{{i.overTime}}</p>
</div>
<div class="mui-card-footer flex_row" style="justify-content: space-between;">
<div class="flex_row">
<img src="./static/心得1.png" alt="" style="width: 1em;"/>
<p>已报名{{i.applyNum}}人</p>
</div>
<button @click="baoming(i)" type="button"
class="mui-btn mui-btn-blue">去报名</button>
</div>
</div>
</div>
<!-- 活动报名 -->
<div class="mui-control-content" id="item1">
活动报名
</div>
<!-- mt -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item " onclick="mui.openWindow('index.html')">
<span class="mui-icon" style="background-image: url('./static/首页.png');background-size: cover;"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item mui-active" onclick="mui.openWindow('gongyi.html')">
<span class="mui-icon" style="background-image: url('./static/公益1.png');background-size: cover;"></span>
<span class="mui-tab-label">公益</span>
</a>
<a class="mui-tab-item" onclick="mui.openWindow('xinde.html')">
<span class="mui-icon" style="background-image: url('./static/心得.png');background-size: cover;"></span>
<span class="mui-tab-label">心得</span>
</a>
<a class="mui-tab-item" onclick="mui.openWindow('sjfx.html')">
<span class="mui-icon" style="background-image: url('./static/我的.png');background-size: cover;"></span>
<span class="mui-tab-label">数据分析</span>
</a>
</nav>
</div>
</div>
<script>
new Vue({
el:'#root',
data:{
huodongs:[]
},
methods: {
// 去报名
baoming(i){
localStorage.setItem('huodong',JSON.stringify(i))
mui.openWindow('gongyi_detail.html')
},
get_data() {
// 公益活动列表
mui.ajax('http://103.170.72.126:8088/prod-api/api/activity/list',{
data:{
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json'
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
if(data.code == 200){
this.huodongs = data.rows
console.log('公益活动',this.huodongs);
}
if(data.code == 401){
mui.openWindow('login.html')
}
},
error:function(xhr,type,errorThrown){
}
});
}
},
mounted(){
this.get_data()
}
})
</script>
</body>
</html>详情页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<script src="./js/vue.min.js"></script>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<div id="root">
<!-- 标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">活动详情</h1>
</header>
<!-- 主体 -->
<div class="mui-content">
<!-- 点击“报名”按钮，进入活动报名详情界面，
活动报名包括：活动展示图片、活动名称、
活动起止时间、活动详情、已报名人数、“报名”按钮，
点击“报名”，弹出确认框，点击“确认”，可报名该活动 -->
<div class="mui-control-content mui-active" id="item1">
<div class="mui-card">
<div class="mui-card-content">
<img :src="'http://103.170.72.126:8088/prod-api/'+huodong.imgUrl" style="width: 100%;" alt="" />
</div>
<div class="mui-card-header flex_column" style="width: 100%; align-items: flex-start;">
<div class="mui-ellipsis">{{huodong.activityName}}</div>
<p>活动时间:{{huodong.startEndTime}}</p>
<p style="width: 100%;" class="mui-ellipsis">简介：{{huodong.briefIntroduction}}</p>
<p>报名截止时间{{huodong.overTime}}</p>
</div>
<div class="mui-card-footer flex_column" style="margin-bottom: 10vh;">
<h3>活动详情</h3>
<p style="white-space: pre-wrap;">{{huodong.activityDetail}}</p>
</div>
<div class="mui-card-footer flex_row" style="justify-content: space-between;position: fixed;bottom: 0;background-color: white;width: 100vw;">
<div class="flex_row">
<img src="./static/心得1.png" alt="" style="width: 1em;"/>
<p>已报名{{huodong.applyNum}}人</p>
</div>
<button @click="baoming(huodong.id)" type="button"
class="mui-btn mui-btn-blue">去报名</button>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:'#root',
data:{
huodong:''
},
methods: {
// 报名
baoming(id){
// // 公益活动列表
mui.ajax('http://103.170.72.126:8088/prod-api/api/activity/apply',{
data:{
activityId:id
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
mui.toast(data.msg)
if(data.code == 200){
this.huodong.applyNum ++
}
if(data.code == 401){
mui.openWindow('login.html')
}
},
error:function(xhr,type,errorThrown){
}
});
},
get_data() {
this.huodong =JSON.parse(localStorage.getItem('huodong'))
console.log(this.huodong);
}
},
mounted(){
this.get_data()
}
})
</script>
</body>
</html>心得
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<script src="./js/vue.min.js"></script>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<div id="root">
<!-- 标题 -->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">学习心得</h1>
</header>
<!-- 主体 -->
<div class="mui-content">
<!-- 顶部显示两个Tab栏，包括学习感言和学习历史，点击不同的标签切换不同的信息 -->
<div class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">学习感言</a>
<a class="mui-control-item" href="#item2">学习历史</a>
</div>
<!-- 学习感言 -->
<div class="mui-control-content mui-active" id="item1">
<!-- 学习感言列表包括感言标题、感言内容（字数过多使用...代替） -->
<div class="mui-card" style="margin-bottom: 8vh;">
<div v-for="(i,index) in ganyans" :key="i.id" class="mui-card-header flex_column" style="align-items: flex-start;">
<div>{{i.title}}</div>
<p class="mui-ellipsis-2">{{i.content}}</p>
</div>
</div>
</div>
<!-- 学习历史 -->
<div class="mui-control-content" id="item2">
<!-- 学习历史包括学习内容标题、文章发布时间、文章内容等，
学习内容下方有“添加笔记”按钮，
点击“添加笔记”按钮可添加、编辑、删除当前用户的学习笔记 -->
<ul class="mui-table-view">
<li v-for="(i,index) in lishis" :key="i.id" class="mui-table-view-cell mui-collapse">
<!-- 学习历史 -->
<a @click="zhankai_note(index)" href="#" class="flex_column">
<div class="mui-ellipsis">{{i.title}}</div>
<p>{{i.issueTime}}</p>
<p class="mui-ellipsis-2">{{i.content}}</p>
<div class="flex_row" style="padding: 10px;border-top: 1px solid lightgray;">
<img src="./static/笔记 (2).png" alt="" style="width: 1em;margin-right: 5px;"/>
<div style="color: skyblue;">添加笔记</div>
</div>
</a>
<!-- 学习笔记 -->
<div class="mui-collapse-content">
<div class="flex_row" style="padding: 10px; width: 100%;justify-content: space-between;">
<div>学习笔记</div>
<div @click="del_note(i.id,i.wstudyNote.noteId)" style="color: red;">删除</div>
</div>
<div class="flex_column" style="width: 100%;">
<input v-model="note_title" type="text" placeholder="请输入标题" style="background-color: #eeeeee;"/>
<textarea placeholder="请输入内容" v-model="note_content" name="" id="" style="width: 100%;background-color: #eeeeee;" rows="5"></textarea>
</div>
<div v-if="i.wstudyNote == null"
@click="add_note(i.id)" class="flex_row" style="padding: 10px;">
<img src="./static/笔记 (3).png" alt="" style="width: 1em;margin-right: 5px;"/>
<div style="color: orange;">添加笔记</div>
</div>
<div v-else
@click="edit_note(i.wstudyNote.noteId)" class="flex_row" style="padding: 10px;">
<img src="./static/笔记 (3).png" alt="" style="width: 1em;margin-right: 5px;"/>
<div style="color: orange;">编辑笔记</div>
</div>
</div>
</li>
</ul>
</div>
<!-- mt -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item " onclick="mui.openWindow('index.html')">
<span class="mui-icon" style="background-image: url('./static/首页.png');background-size: cover;"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item " onclick="mui.openWindow('gongyi.html')">
<span class="mui-icon" style="background-image: url('./static/公益.png');background-size: cover;"></span>
<span class="mui-tab-label">公益</span>
</a>
<a class="mui-tab-item mui-active" onclick="mui.openWindow('xinde.html')">
<span class="mui-icon" style="background-image: url('./static/心得1.png');background-size: cover;"></span>
<span class="mui-tab-label">心得</span>
</a>
<a class="mui-tab-item" onclick="mui.openWindow('sjfx.html')">
<span class="mui-icon" style="background-image: url('./static/我的.png');background-size: cover;"></span>
<span class="mui-tab-label">数据分析</span>
</a>
</nav>
</div>
</div>
<script>
new Vue({
el:'#root',
data:{
ganyans:[],
note_title:'',
note_content:'',
lishis:[]
},
methods: {
// 编辑笔记
edit_note(n_id){
mui.ajax('http://103.170.72.126:8088/prod-api/api/history/note',{
data:{
noteTitle:this.note_title,
noteContent:this.note_content,
noteId:n_id
},
dataType:'json',//服务器返回json格式数据
type:'PUT',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
console.log(data);
if(data.code == 200){
mui.alert(data.msg,function(){
location.reload()
})
}
if(data.code == 401){
mui.openWindow('login.html')
}
},
error:function(xhr,type,errorThrown){
}
});
},
// 展开笔记
zhankai_note(index){
if(this.lishis[index].wstudyNote != null){
this.note_title = this.lishis[index].wstudyNote.noteTitle
this.note_content = this.lishis[index].wstudyNote.noteContent
}
},
// 删除笔记
del_note(h_id,n_id){
console.log(h_id,n_id);
mui.ajax('http://103.170.72.126:8088/prod-api/api/history/note',{
data:{
noteId:n_id,
studyHistoryId:h_id
},
dataType:'json',//服务器返回json格式数据
type:'DELETE',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
console.log(data);
if(data.code == 200){
mui.alert(data.msg,function(){
location.reload()
})
}
if(data.code == 401){
mui.openWindow('login.html')
}
},
error:function(xhr,type,errorThrown){
}
});
},
// 添加笔记
add_note(h_id){
mui.ajax('http://103.170.72.126:8088/prod-api/api/history/note',{
data:{
noteTitle:this.note_title,
noteContent:this.note_content,
studyHistoryId:h_id
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
console.log(data);
if(data.code == 200){
mui.alert(data.msg,function(){
location.reload()
})
}
if(data.code == 401){
mui.openWindow('login.html')
}
},
error:function(xhr,type,errorThrown){
}
});
},
get_data() {
// 学习感言
mui.ajax('http://103.170.72.126:8088/prod-api/api/testimonials/list',{
data:{
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
if(data.code == 200){
this.ganyans = data.rows
console.log(this.ganyans);
localStorage.setItem('userId',this.ganyans[0].userId)
}
if(data.code == 401){
mui.openWindow('login.html')
}
},
error:function(xhr,type,errorThrown){
}
});
// 学习历史
mui.ajax('http://103.170.72.126:8088/prod-api/api/history/list',{
data:{
userId:localStorage.getItem('userId')
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
if(data.code == 200){
this.lishis = data.rows
console.log('学习历史',this.lishis);
}
if(data.code == 401){
mui.openWindow('login.html')
}
},
error:function(xhr,type,errorThrown){
}
});
}
},
mounted(){
this.get_data()
}
})
</script>
</body>
</html>数据分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<script src="./js/vue.min.js"></script>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="css/my.css" />
<script src="js/echarts.js"></script>
</head>
<body>
<div id="root">
<!-- 标题 -->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">数据分析</h1>
</header>
<!-- 主体 -->
<div class="mui-content">
<!-- mt -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item " onclick="mui.openWindow('index.html')">
<span class="mui-icon" style="background-image: url('./static/首页.png');background-size: cover;"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item " onclick="mui.openWindow('gongyi.html')">
<span class="mui-icon" style="background-image: url('./static/公益.png');background-size: cover;"></span>
<span class="mui-tab-label">公益</span>
</a>
<a class="mui-tab-item" onclick="mui.openWindow('xinde.html')">
<span class="mui-icon" style="background-image: url('./static/心得.png');background-size: cover;"></span>
<span class="mui-tab-label">心得</span>
</a>
<a class="mui-tab-item mui-active" onclick="mui.openWindow('sjfx.html')">
<span class="mui-icon" style="background-image: url('./static/我的1.png');background-size: cover;"></span>
<span class="mui-tab-label">数据分析</span>
</a>
</nav>
<!-- 条形图：请分析2022年1月至12月评论数量新闻信息的评论数量，
按照性别比例进行分析，横坐标为月份，纵坐标为新闻评论数；
（每组数据需有两个条形数据列，
第一个为女性评论数统计列，第二个为男性评论数统计列） -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<h4>2022年1月至12月评论数量新闻信息的评论数量</h4>
<div id="tx" style="width: 100vw;height: 30vh;">
</div>
<!-- 折线图：请分析统计所有2022年1月至12月所有用户阅读书籍数量变化趋势，
横坐标为月份，纵坐标为阅读书籍数量，
如（横坐标为1月、2月、3月...，纵坐标为200、300、400、500） -->
<h4>2022年1月至12月所有用户阅读书籍数量变化趋势</h4>
<div id="zx" style="width: 100vw;height: 30vh;">
</div>
<!-- 饼状图：请分析用户阅读书籍类型占总书籍类型的比例。
（图内显示相应回收品类名称及比例值 -->
<h4>用户阅读书籍类型占总书籍类型的比例</h4>
<div id="bt" style="width: 100vw;height: 30vh;margin-bottom: 10vh;">
</div>
</div>
</div>
<script>
new Vue({
el:'#root',
data:{
tx_data:'',
zx_data:'',
bt_data:''
},
methods: {
get_data() {
// 饼图
mui.ajax('http://103.170.72.126:8088/prod-api/api/read/book/list/type_1',{
data:{
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
console.log(data);
let ob_list = []
for (let i in data.data.name) {
let ob = {value:data.data.count[i],name:data.data.name[i]}
ob_list.push(ob)
}
this.bt_data = ob_list
console.log('bt',this.bt_data);
this.bt_init()
},
error:function(xhr,type,errorThrown){
}
});
// 柱状图
mui.ajax('http://103.170.72.126:8088/prod-api/api/data/comment/list_2',{
data:{
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
this.tx_data = data.data
// 图表中需要数字类型
// this.tx_data.woman = this.tx_data.woman.map(function(item){
// return Number(item)
// })
// this.tx_data.man = this.tx_data.man.map(function(item){
// return Number(item)
// })
console.log(this.tx_data);
this.tx_init()
},
error:function(xhr,type,errorThrown){
}
});
// 折线图
mui.ajax('http://103.170.72.126:8088/prod-api/api/read/book/list_1',{
data:{
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
// 'Content-Type':'application/json',
'Authorization':localStorage.getItem('token')
},
success:(data)=>{
this.zx_data = data.data
// this.zx_data.value = this.zx_data.value.map(function(item){
// return Number(item)
// })
console.log(this.zx_data);
this.zx_init()
},
error:function(xhr,type,errorThrown){
}
});
},
// 柱形图
zx_init(){
let zx = echarts.init(document.querySelector('#zx'))
// 折线图基础配置
var zxOption = {
color:["blue"],
legend:{
data:['阅读书籍数量'],
left: 'center',
},
xAxis: {
splitLine: {
show: true
},
type: 'category',
data: this.zx_data.name
},
yAxis: {
// min: 0,// 最小值
// interval: 10, // 步长
// max:100,// 最大值
// type: 'value'
},
series: [{
name:'阅读书籍数量',
data: this.zx_data.value,// y轴坐标
type: 'line'
}]
}
zx.setOption(zxOption)
},
tx_init(){
// 基于准备好的dom，初始化echarts实例
let tx = echarts.init(document.querySelector('#tx'))
// 指定图表的配置项和数据
var txOption = {
color:['blue','red'],//柱状图颜色
legend: { // 展示系列的标记
data: ['男性', '女性'],
left:"center",
},
grid:{
show:true
},
xAxis: {
type: 'category',
data: this.tx_data.name,
splitLine:{ show: true }, //x轴网格线
},
yAxis: {
// type: 'value',
// min:0,
// max:1000
},
series: [{
name: '男性',
data: this.tx_data.woman,//柱状图1的y轴数据
type: 'bar'
},
{
name: '女性',
data: this.tx_data.man,//柱状图2的y轴数据
type: 'bar'
}
]
}
// 使用刚指定的配置项和数据显示图表
tx.setOption(txOption)
},
bt_init(){
let bt = echarts.init(document.querySelector('#bt'))
var pieOption = {
color:['red','green'],
tooltip: {
trigger: 'item'
},
legend: {
bottom: '0',
left: 'center',
icon:'circle',
data: ['XXX1', 'XXX2']
},
series: [{
type: 'pie',
radius: '45%',// 饼图半径
label: {
normal: {
show: true,
formatter: '{d}%',// 显示格式
}
},
data: this.bt_data
}]
}
bt.setOption(pieOption)
},
},
mounted(){
this.get_data()
}
})
</script>
</body>
</html>
