技术架构：Java + SpringBoot + Vue3 + MySQL
一、项目搭建
1.1 开发工具
2024年了，我们就不考虑Eclipse了好吧，直接下载IDEA社区版。
下载地址：https://www.jetbrains.com/idea/download/other.html
1.2 环境配置
1.2.1 JDK
（1）下载JDK1.8 windows64位安装版：https://tool4j.com/files/software/jdk-8u102-windows-x64.exe
（2）安装及环境变量配置：https://blog.csdn.net/i_for/article/details/131128502
1.2.2 Maven
（1）下载Maven3.6.3：https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.zip
（2）配置教程：https://www.cnblogs.com/yu-si/p/14586626.html
1.2.3 MySQL
安装配置教程：https://blog.csdn.net/fattigers/article/details/135558127
1.2.4 NodeJs
下载Nodejs16.20.2：https://nodejs.org/dist/v16.20.2/node-v16.20.2-x64.msi
管理员模块属于是网站的后台，进入之后有大量的管理员功能，管理员也可以使用老人信息模块的功能，为了维护网站的稳定与页面的布局，将管理员模块的功能详细化后可以使用系统管理对页面进行布局修改，可以发布公告提示老人信息规范，老人信息模块只可以查看健康信息和费用收缴信息，并且更改个人信息，智慧养老中心总体结构图如图
功能实现：
/**
* 登录相关
*/
@RequestMapping("users")
@RestController
public class UsersController{
@Autowired
private UsersService userService;
@Autowired
private TokenService tokenService;
/**
* 登录
*/
@IgnoreAuth
@PostMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
if(user==null || !user.getPassword().equals(password)) {
return R.error("账号或密码不正确");
}
String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
return R.ok().put("token", token);
}
/**
* 注册
*/
@IgnoreAuth
@PostMapping(value = "/register")
public R register(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
if(userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
userService.insert(user);
return R.ok();
}
/**
* 退出
*/
@GetMapping(value = "logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 密码重置
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request){
UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
if(user==null) {
return R.error("账号不存在");
}
user.setPassword("123456");
userService.update(user,null);
return R.ok("密码已重置为：123456");
}
/**
* 列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,UsersEntity user){
EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/list")
public R list( UsersEntity user){
EntityWrapper<UsersEntity> ew = new EntityWrapper<UsersEntity>();
ew.allEq(MPUtil.allEQMapPre( user, "user"));
return R.ok().put("data", userService.selectListView(ew));
}
/**
* 信息
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") String id){
UsersEntity user = userService.selectById(id);
return R.ok().put("data", user);
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrUser(HttpServletRequest request){
Long id = (Long)request.getSession().getAttribute("userId");
UsersEntity user = userService.selectById(id);
return R.ok().put("data", user);
}
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
if(userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
userService.insert(user);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody UsersEntity user){
// ValidatorUtils.validateEntity(user);
UsersEntity u = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername()));
if(u!=null && u.getId()!=user.getId() && u.getUsername().equals(user.getUsername())) {
return R.error("用户名已存在。");
}
userService.updateById(user);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
userService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
/**
* 系统用户
*/
public interface UsersService extends IService<UsersEntity> {
PageUtils queryPage(Map<String, Object> params);
List<UsersEntity> selectListView(Wrapper<UsersEntity> wrapper);
PageUtils queryPage(Map<String, Object> params,Wrapper<UsersEntity> wrapper);
}
/**
* 系统用户
*/
@Service("usersService")
public class UsersServiceImpl extends ServiceImpl<UsersDao, UsersEntity> implements UsersService {
@Override
public PageUtils queryPage(Map<String, Object> params) {
Page<UsersEntity> page = this.selectPage(
new Query<UsersEntity>(params).getPage(),
new EntityWrapper<UsersEntity>()
);
return new PageUtils(page);
}
@Override
public List<UsersEntity> selectListView(Wrapper<UsersEntity> wrapper) {
return baseMapper.selectListView(wrapper);
}
@Override
public PageUtils queryPage(Map<String, Object> params,
Wrapper<UsersEntity> wrapper) {
Page<UsersEntity> page =new Query<UsersEntity>(params).getPage();
page.setRecords(baseMapper.selectListView(page,wrapper));
PageUtils pageUtil = new PageUtils(page);
return pageUtil;
}
}
/**
* 用户
*/
public interface UsersDao extends BaseMapper<UsersEntity> {
List<UsersEntity> selectListView(@Param("ew") Wrapper<UsersEntity> wrapper);
List<UsersEntity> selectListView(Pagination page,@Param("ew") Wrapper<UsersEntity> wrapper);
}
健康信息
/**
* 健康信息
* 后端接口
* @author
* @email
* @date 2022-09-08 14:49:58
*/
@RestController
@RequestMapping("/jiankangxinxi")
public class JiankangxinxiController {
@Autowired
private JiankangxinxiService jiankangxinxiService;
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,JiankangxinxiEntity jiankangxinxi,
@RequestParam(required = false) @DateTimeFormat(pattern="yyyy-MM-dd") Date faburiqistart,
@RequestParam(required = false) @DateTimeFormat(pattern="yyyy-MM-dd") Date faburiqiend,
HttpServletRequest request){
String tableName = request.getSession().getAttribute("tableName").toString();
if(tableName.equals("laorenxinxi")) {
jiankangxinxi.setLaorenxingming((String)request.getSession().getAttribute("username"));
}
EntityWrapper<JiankangxinxiEntity> ew = new EntityWrapper<JiankangxinxiEntity>();
if(faburiqistart!=null) ew.ge("faburiqi", faburiqistart);
if(faburiqiend!=null) ew.le("faburiqi", faburiqiend);
PageUtils page = jiankangxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jiankangxinxi), params), params));
return R.ok().put("data", page);
}
/**
* 前端列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,JiankangxinxiEntity jiankangxinxi,
@RequestParam(required = false) @DateTimeFormat(pattern="yyyy-MM-dd") Date faburiqistart,
@RequestParam(required = false) @DateTimeFormat(pattern="yyyy-MM-dd") Date faburiqiend,
HttpServletRequest request){
EntityWrapper<JiankangxinxiEntity> ew = new EntityWrapper<JiankangxinxiEntity>();
if(faburiqistart!=null) ew.ge("faburiqi", faburiqistart);
if(faburiqiend!=null) ew.le("faburiqi", faburiqiend);
PageUtils page = jiankangxinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, jiankangxinxi), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/lists")
public R list( JiankangxinxiEntity jiankangxinxi){
EntityWrapper<JiankangxinxiEntity> ew = new EntityWrapper<JiankangxinxiEntity>();
ew.allEq(MPUtil.allEQMapPre( jiankangxinxi, "jiankangxinxi"));
return R.ok().put("data", jiankangxinxiService.selectListView(ew));
}
/**
* 查询
*/
@RequestMapping("/query")
public R query(JiankangxinxiEntity jiankangxinxi){
EntityWrapper< JiankangxinxiEntity> ew = new EntityWrapper< JiankangxinxiEntity>();
ew.allEq(MPUtil.allEQMapPre( jiankangxinxi, "jiankangxinxi"));
JiankangxinxiView jiankangxinxiView = jiankangxinxiService.selectView(ew);
return R.ok("查询健康信息成功").put("data", jiankangxinxiView);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
JiankangxinxiEntity jiankangxinxi = jiankangxinxiService.selectById(id);
return R.ok().put("data", jiankangxinxi);
}
/**
* 前端详情
*/
@IgnoreAuth
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id){
JiankangxinxiEntity jiankangxinxi = jiankangxinxiService.selectById(id);
return R.ok().put("data", jiankangxinxi);
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody JiankangxinxiEntity jiankangxinxi, HttpServletRequest request){
jiankangxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(jiankangxinxi);
jiankangxinxiService.insert(jiankangxinxi);
return R.ok();
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody JiankangxinxiEntity jiankangxinxi, HttpServletRequest request){
jiankangxinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(jiankangxinxi);
jiankangxinxiService.insert(jiankangxinxi);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
@Transactional
public R update(@RequestBody JiankangxinxiEntity jiankangxinxi, HttpServletRequest request){
//ValidatorUtils.validateEntity(jiankangxinxi);
jiankangxinxiService.updateById(jiankangxinxi);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
jiankangxinxiService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
/**
* 提醒接口
*/
@RequestMapping("/remind/{columnName}/{type}")
public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request,
@PathVariable("type") String type,@RequestParam Map<String, Object> map) {
map.put("column", columnName);
map.put("type", type);
if(type.equals("2")) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
Date remindStartDate = null;
Date remindEndDate = null;
if(map.get("remindstart")!=null) {
Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindStart);
remindStartDate = c.getTime();
map.put("remindstart", sdf.format(remindStartDate));
}
if(map.get("remindend")!=null) {
Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
c.setTime(new Date());
c.add(Calendar.DAY_OF_MONTH,remindEnd);
remindEndDate = c.getTime();
map.put("remindend", sdf.format(remindEndDate));
}
}
Wrapper<JiankangxinxiEntity> wrapper = new EntityWrapper<JiankangxinxiEntity>();
if(map.get("remindstart")!=null) {
wrapper.ge(columnName, map.get("remindstart"));
}
if(map.get("remindend")!=null) {
wrapper.le(columnName, map.get("remindend"));
}
String tableName = request.getSession().getAttribute("tableName").toString();
if(tableName.equals("laorenxinxi")) {
wrapper.eq("laorenxingming", (String)request.getSession().getAttribute("username"));
}
int count = jiankangxinxiService.selectCount(wrapper);
return R.ok().put("count", count);
}
}
/**
* 健康信息
*
* @author
* @email
* @date 2022-09-08 14:49:58
*/
public interface JiankangxinxiService extends IService<JiankangxinxiEntity> {
PageUtils queryPage(Map<String, Object> params);
List<JiankangxinxiVO> selectListVO(Wrapper<JiankangxinxiEntity> wrapper);
JiankangxinxiVO selectVO(@Param("ew") Wrapper<JiankangxinxiEntity> wrapper);
List<JiankangxinxiView> selectListView(Wrapper<JiankangxinxiEntity> wrapper);
JiankangxinxiView selectView(@Param("ew") Wrapper<JiankangxinxiEntity> wrapper);
PageUtils queryPage(Map<String, Object> params,Wrapper<JiankangxinxiEntity> wrapper);
}
@Service("jiankangxinxiService")
public class JiankangxinxiServiceImpl extends ServiceImpl<JiankangxinxiDao, JiankangxinxiEntity> implements JiankangxinxiService {
@Override
public PageUtils queryPage(Map<String, Object> params) {
Page<JiankangxinxiEntity> page = this.selectPage(
new Query<JiankangxinxiEntity>(params).getPage(),
new EntityWrapper<JiankangxinxiEntity>()
);
return new PageUtils(page);
}
@Override
public PageUtils queryPage(Map<String, Object> params, Wrapper<JiankangxinxiEntity> wrapper) {
Page<JiankangxinxiView> page =new Query<JiankangxinxiView>(params).getPage();
page.setRecords(baseMapper.selectListView(page,wrapper));
PageUtils pageUtil = new PageUtils(page);
return pageUtil;
}
@Override
public List<JiankangxinxiVO> selectListVO(Wrapper<JiankangxinxiEntity> wrapper) {
return baseMapper.selectListVO(wrapper);
}
@Override
public JiankangxinxiVO selectVO(Wrapper<JiankangxinxiEntity> wrapper) {
return baseMapper.selectVO(wrapper);
}
@Override
public List<JiankangxinxiView> selectListView(Wrapper<JiankangxinxiEntity> wrapper) {
return baseMapper.selectListView(wrapper);
}
@Override
public JiankangxinxiView selectView(Wrapper<JiankangxinxiEntity> wrapper) {
return baseMapper.selectView(wrapper);
}
}
Vue
<template>
<div class="main-content">
<!-- 列表页 -->
<template v-if="showFlag">
<el-form class="center-form-pv" :style='{"width":"250px","padding":"0 6px","margin":"0 0 20px"}' :inline="true" :model="searchForm">
<el-row :style='{"flexDirection":"column","display":"flex"}' >
<div :style='{"margin":"0","flexDirection":"column","display":"flex"}'>
<label :style='{"margin":"0","color":"#000","textAlign":"center","display":"inline-block","width":"100%","lineHeight":"40px","fontSize":"14px","fontWeight":"500","height":"40px"}' class="item-label">用户名</label>
<el-input v-model="searchForm.username" placeholder="用户名" clearable></el-input>
</div>
<el-button :style='{"border":"1px solid #97C9D6","cursor":"pointer","padding":"0 24px","boxShadow":"0px 2px 2px 0px #78ABC3","outline":"none","margin":"10px 0 0","color":"#78ABC3","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"40px"}' type="success" @click="search()">查询</el-button>
</el-row>
<el-row :style='{"margin":"20px 0","flexDirection":"column","display":"flex"}'>
<el-button :style='{"border":"1px solid #97C9D6","cursor":"pointer","padding":"0","boxShadow":"0px 2px 2px 0px #78ABC3","margin":"0 0 10px","outline":"none","color":"#78ABC3","borderRadius":"30px","background":"#fff","width":"100%","fontSize":"14px","height":"40px"}' v-if="isAuth('users','新增')" type="success" @click="addOrUpdateHandler()">新增</el-button>
<el-button :style='{"border":"1px solid #97C9D6","cursor":"pointer","padding":"0","boxShadow":"0px 2px 2px 0px #78ABC3","margin":"0 0 10px","outline":"none","color":"#78ABC3","borderRadius":"30px","background":"#fff","width":"100%","fontSize":"14px","height":"40px"}' v-if="isAuth('users','删除')" :disabled="dataListSelections.length <= 0" type="danger" @click="deleteHandler()">删除</el-button>
</el-row>
</el-form>
<!-- <div> -->
<el-table class="tables"
:stripe='false'
:style='{"padding":"0","boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.3020)","borderColor":"#eee","borderRadius":"30px","borderWidth":"1px 0 0 1px","background":"#fff","width":"100%","borderStyle":"solid","height":"fit-content"}'
v-if="isAuth('users','查看')"
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandler">
<el-table-column :resizable='true' type="selection" align="center" width="50"></el-table-column>
<el-table-column :resizable='true' :sortable='false' label="索引" type="index" width="50" />
<el-table-column :resizable='true' :sortable='false'
prop="username"
label="用户名">
<template slot-scope="scope">
{{scope.row.username}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="password"
label="密码">
<template slot-scope="scope">
{{scope.row.password}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="role"
label="角色">
<template slot-scope="scope">
{{scope.row.role}}
</template>
</el-table-column>
<el-table-column width="300" label="操作">
<template slot-scope="scope">
<el-button :style='{"border":"0","cursor":"pointer","padding":"0 24px","margin":"0 10px 6px 0","outline":"none","color":"#fff","borderRadius":"30px","background":"#93C7B3","width":"auto","fontSize":"14px","height":"32px"}' v-if=" isAuth('users','查看')" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
<el-button :style='{"border":"0","cursor":"pointer","padding":"0 24px","margin":"0 10px 6px 0","outline":"none","color":"#fff","borderRadius":"30px","background":"#93C7B3","width":"auto","fontSize":"14px","height":"32px"}' v-if=" isAuth('users','修改')" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
<el-button :style='{"border":"0","cursor":"pointer","padding":"0 24px","margin":"0 10px 6px 0","outline":"none","color":"#fff","borderRadius":"30px","background":"#93C7B3","width":"auto","fontSize":"14px","height":"32px"}' v-if="isAuth('users','删除') " type="danger" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
background
:page-sizes="[10, 20, 30, 50]"
:page-size="pageSize"
:layout="layouts.join()"
:total="totalPage"
prev-text="<"
next-text=">"
:hide-on-single-page="true"
:style='{"width":"100%","padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","fontWeight":"500"}'
></el-pagination>
<!-- </div> -->
</template>
<!-- 添加/修改页面 将父组件的search方法传递给子组件-->
<add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
</div>
</template>
<script>
import axios from 'axios'
import AddOrUpdate from "./add-or-update";
export default {
data() {
return {
searchForm: {
key: ""
},
form:{},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
showFlag: true,
sfshVisiable: false,
shForm: {},
chartVisiable: false,
addOrUpdateFlag:false,
layouts: ["total","prev","pager","next","sizes","jumper"],
};
},
created() {
this.init();
this.getDataList();
this.contentStyleChange()
},
mounted() {
},
filters: {
htmlfilter: function (val) {
return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
}
},
components: {
AddOrUpdate,
},
methods: {
contentStyleChange() {
this.contentPageStyleChange()
},
// 分页
contentPageStyleChange(){
let arr = []
// if(this.contents.pageTotal) arr.push('total')
// if(this.contents.pageSizes) arr.push('sizes')
// if(this.contents.pagePrevNext){
// arr.push('prev')
// if(this.contents.pagePager) arr.push('pager')
// arr.push('next')
// }
// if(this.contents.pageJumper) arr.push('jumper')
// this.layouts = arr.join()
// this.contents.pageEachNum = 10
},
init () {
},
search() {
this.pageIndex = 1;
this.getDataList();
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
let params = {
page: this.pageIndex,
limit: this.pageSize,
sort: 'id',
order: 'desc',
}
if(this.searchForm.username!='' && this.searchForm.username!=undefined){
params['username'] = '%' + this.searchForm.username + '%'
}
this.$http({
url: "users/page",
method: "get",
params: params
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.data.list;
this.totalPage = data.data.total;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandler(val) {
this.dataListSelections = val;
},
// 添加/修改
addOrUpdateHandler(id,type) {
this.showFlag = false;
this.addOrUpdateFlag = true;
this.crossAddOrUpdateFlag = false;
if(type!='info'){
type = 'else';
}
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id,type);
});
},
// 下载
download(file){
window.open(`${file}`)
},
// 删除
deleteHandler(id) {
var ids = id
? [Number(id)]
: this.dataListSelections.map(item => {
return Number(item.id);
});
this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.$http({
url: "users/delete",
method: "post",
data: ids
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.search();
}
});
} else {
this.$message.error(data.msg);
}
});
});
},
}
};
</script>
<style lang="scss" scoped>
.center-form-pv {
.el-date-editor.el-input {
width: auto;
}
}
.el-input {
width: auto;
}
// form
.center-form-pv .el-input /deep/ .el-input__inner {
border: 1px solid #78ABC3;
border-radius: 0;
padding: 0 12px;
box-shadow: 0px 2px 2px 0px #78ABC3;
outline: none;
color: #000;
width: 100%;
font-size: 14px;
height: 40px;
}
.center-form-pv .el-select /deep/ .el-input__inner {
border: 1px solid #78ABC3;
border-radius: 0;
padding: 0 10px;
box-shadow: 0px 2px 2px 0px #78ABC3;
outline: none;
color: #000;
width: 100%;
font-size: 14px;
height: 40px;
}
.center-form-pv .el-date-editor /deep/ .el-input__inner {
border: 1px solid #78ABC3;
border-radius: 0;
padding: 0 10px 0 30px;
box-shadow: 0px 2px 2px 0px #78ABC3;
outline: none;
color: #000;
width: 100%;
font-size: 14px;
height: 40px;
}
// table
.el-table /deep/ .el-table__header-wrapper thead {
color: #999;
font-weight: 500;
width: 100%;
}
.el-table /deep/ .el-table__header-wrapper thead tr {
background: #93C7B3;
}
.el-table /deep/ .el-table__header-wrapper thead tr th {
padding: 12px 0;
color: #fff;
background: transparent;
border-color: #eee;
border-width: 0 1px 1px 0;
border-style: solid;
text-align: center;
}
.el-table /deep/ .el-table__header-wrapper thead tr th .cell {
padding: 0 10px;
word-wrap: normal;
word-break: break-all;
white-space: normal;
font-weight: bold;
display: inline-block;
vertical-align: middle;
width: 100%;
line-height: 24px;
position: relative;
text-overflow: ellipsis;
}
.el-table /deep/ .el-table__body-wrapper tbody {
width: 100%;
}
.el-table /deep/ .el-table__body-wrapper tbody tr {
background: #fff;
}
.el-table /deep/ .el-table__body-wrapper tbody tr td {
padding: 12px 0;
color: #999;
background: #fff;
border-color: #6F6F97;
border-width: 0 1px 1px 0;
border-style: solid;
text-align: center;
}
.el-table /deep/ .el-table__body-wrapper tbody tr:hover td {
padding: 12px 0;
color: #000;
background: rgba(147, 199, 179, 0.5);
border-color: #6F6F97;
border-width: 0 1px 1px 0;
border-style: solid;
}
.el-table /deep/ .el-table__body-wrapper tbody tr td {
padding: 12px 0;
color: #999;
background: #fff;
border-color: #6F6F97;
border-width: 0 1px 1px 0;
border-style: solid;
text-align: center;
}
.el-table /deep/ .el-table__body-wrapper tbody tr td .cell {
padding: 0 10px;
overflow: hidden;
word-break: break-all;
white-space: normal;
line-height: 24px;
text-overflow: ellipsis;
}
// pagination
.main-content .el-pagination /deep/ .el-pagination__total {
margin: 0 10px 0 0;
color: #666;
font-weight: 400;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .btn-prev {
border: none;
border-radius: 2px;
padding: 0;
margin: 0 5px;
color: #666;
background: #f4f4f5;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
min-width: 35px;
height: 28px;
}
.main-content .el-pagination /deep/ .btn-next {
border: none;
border-radius: 2px;
padding: 0;
margin: 0 5px;
color: #666;
background: #f4f4f5;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
min-width: 35px;
height: 28px;
}
.main-content .el-pagination /deep/ .btn-prev:disabled {
border: none;
cursor: not-allowed;
border-radius: 2px;
padding: 0;
margin: 0 5px;
color: #C0C4CC;
background: #f4f4f5;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .btn-next:disabled {
border: none;
cursor: not-allowed;
border-radius: 2px;
padding: 0;
margin: 0 5px;
color: #C0C4CC;
background: #f4f4f5;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pager {
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
}
.main-content .el-pagination /deep/ .el-pager .number {
cursor: pointer;
padding: 0 4px;
margin: 0 5px;
color: #666;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
border-radius: 2px;
background: #f4f4f5;
text-align: center;
min-width: 30px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pager .number:hover {
cursor: pointer;
padding: 0 4px;
margin: 0 5px;
color: #fff;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
border-radius: 2px;
background: #93C7B3;
text-align: center;
min-width: 30px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pager .number.active {
cursor: default;
padding: 0 4px;
margin: 0 5px;
color: #FFF;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
border-radius: 2px;
background: #93C7B3;
text-align: center;
min-width: 30px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__sizes {
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__sizes .el-input {
margin: 0 5px;
width: 100px;
position: relative;
}
.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
border: 1px solid #DCDFE6;
cursor: pointer;
padding: 0 25px 0 8px;
color: #606266;
display: inline-block;
font-size: 13px;
line-height: 28px;
border-radius: 3px;
outline: 0;
background: #FFF;
width: 100%;
text-align: center;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
top: 0;
position: absolute;
right: 0;
height: 100%;
}
.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
cursor: pointer;
color: #C0C4CC;
width: 25px;
font-size: 14px;
line-height: 28px;
text-align: center;
}
.main-content .el-pagination /deep/ .el-pagination__jump {
margin: 0 0 0 24px;
color: #606266;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__jump .el-input {
border-radius: 3px;
padding: 0 2px;
margin: 0 2px;
display: inline-block;
width: 50px;
font-size: 14px;
line-height: 18px;
position: relative;
text-align: center;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
border: 1px solid #DCDFE6;
cursor: pointer;
padding: 0 3px;
color: #606266;
display: inline-block;
font-size: 14px;
line-height: 28px;
border-radius: 3px;
outline: 0;
background: #FFF;
width: 100%;
text-align: center;
height: 28px;
}
</style>
<template>
<div class="main-content">
<!-- 列表页 -->
<template v-if="showFlag">
<el-form class="center-form-pv" :style='{"width":"250px","padding":"0 6px","margin":"0 0 20px"}' :inline="true" :model="searchForm">
<el-row :style='{"flexDirection":"column","display":"flex"}' >
<div :style='{"margin":"0","flexDirection":"column","display":"flex"}'>
<label :style='{"margin":"0","color":"#000","textAlign":"center","display":"inline-block","width":"100%","lineHeight":"40px","fontSize":"14px","fontWeight":"500","height":"40px"}' class="item-label">体重（kg）</label>
<el-input v-model="searchForm.tizhong" placeholder="体重（kg）" clearable></el-input>
</div>
<div :style='{"margin":"0","flexDirection":"column","display":"flex"}'>
<label :style='{"margin":"0","color":"#000","textAlign":"center","display":"inline-block","width":"100%","lineHeight":"40px","fontSize":"14px","fontWeight":"500","height":"40px"}' class="item-label">发布日期</label>
<el-date-picker v-model="searchForm.faburiqistart" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="发布日期起始"></el-date-picker>
至
<el-date-picker v-model="searchForm.faburiqiend" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="发布日期结束"></el-date-picker>
</div>
<el-button :style='{"border":"1px solid #97C9D6","cursor":"pointer","padding":"0 24px","boxShadow":"0px 2px 2px 0px #78ABC3","outline":"none","margin":"10px 0 0","color":"#78ABC3","borderRadius":"30px","background":"#fff","width":"auto","fontSize":"14px","height":"40px"}' type="success" @click="search()">查询</el-button>
</el-row>
<el-row :style='{"margin":"20px 0","flexDirection":"column","display":"flex"}'>
<el-button :style='{"border":"1px solid #97C9D6","cursor":"pointer","padding":"0","boxShadow":"0px 2px 2px 0px #78ABC3","margin":"0 0 10px","outline":"none","color":"#78ABC3","borderRadius":"30px","background":"#fff","width":"100%","fontSize":"14px","height":"40px"}' v-if="isAuth('jiankangxinxi','新增')" type="success" @click="addOrUpdateHandler()">新增</el-button>
<el-button :style='{"border":"1px solid #97C9D6","cursor":"pointer","padding":"0","boxShadow":"0px 2px 2px 0px #78ABC3","margin":"0 0 10px","outline":"none","color":"#78ABC3","borderRadius":"30px","background":"#fff","width":"100%","fontSize":"14px","height":"40px"}' v-if="isAuth('jiankangxinxi','删除')" :disabled="dataListSelections.length <= 0" type="danger" @click="deleteHandler()">删除</el-button>
</el-row>
</el-form>
<!-- <div> -->
<el-table class="tables"
:stripe='false'
:style='{"padding":"0","boxShadow":"0px 4px 10px 0px rgba(0,0,0,0.3020)","borderColor":"#eee","borderRadius":"30px","borderWidth":"1px 0 0 1px","background":"#fff","width":"100%","borderStyle":"solid","height":"fit-content"}'
v-if="isAuth('jiankangxinxi','查看')"
:data="dataList"
v-loading="dataListLoading"
@selection-change="selectionChangeHandler">
<el-table-column :resizable='true' type="selection" align="center" width="50"></el-table-column>
<el-table-column :resizable='true' :sortable='false' label="索引" type="index" width="50" />
<el-table-column :resizable='true' :sortable='false'
prop="laorenxingming"
label="老人姓名">
<template slot-scope="scope">
{{scope.row.laorenxingming}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="xingbie"
label="性别">
<template slot-scope="scope">
{{scope.row.xingbie}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="nianling"
label="年龄">
<template slot-scope="scope">
{{scope.row.nianling}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="huanbingshi"
label="患病史">
<template slot-scope="scope">
{{scope.row.huanbingshi}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="shengao"
label="身高（cm）">
<template slot-scope="scope">
{{scope.row.shengao}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="tizhong"
label="体重（kg）">
<template slot-scope="scope">
{{scope.row.tizhong}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="xinlv"
label="心率">
<template slot-scope="scope">
{{scope.row.xinlv}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="xueya"
label="血压">
<template slot-scope="scope">
{{scope.row.xueya}}
</template>
</el-table-column>
<el-table-column :resizable='true' :sortable='false'
prop="faburiqi"
label="发布日期">
<template slot-scope="scope">
{{scope.row.faburiqi}}
</template>
</el-table-column>
<el-table-column width="300" label="操作">
<template slot-scope="scope">
<el-button :style='{"border":"0","cursor":"pointer","padding":"0 24px","margin":"0 10px 6px 0","outline":"none","color":"#fff","borderRadius":"30px","background":"#93C7B3","width":"auto","fontSize":"14px","height":"32px"}' v-if=" isAuth('jiankangxinxi','查看')" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">详情</el-button>
<el-button :style='{"border":"0","cursor":"pointer","padding":"0 24px","margin":"0 10px 6px 0","outline":"none","color":"#fff","borderRadius":"30px","background":"#93C7B3","width":"auto","fontSize":"14px","height":"32px"}' v-if=" isAuth('jiankangxinxi','修改')" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">修改</el-button>
<el-button :style='{"border":"0","cursor":"pointer","padding":"0 24px","margin":"0 10px 6px 0","outline":"none","color":"#fff","borderRadius":"30px","background":"#93C7B3","width":"auto","fontSize":"14px","height":"32px"}' v-if="isAuth('jiankangxinxi','删除') " type="danger" size="mini" @click="deleteHandler(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
background
:page-sizes="[10, 20, 30, 50]"
:page-size="pageSize"
:layout="layouts.join()"
:total="totalPage"
prev-text="<"
next-text=">"
:hide-on-single-page="true"
:style='{"width":"100%","padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","fontWeight":"500"}'
></el-pagination>
<!-- </div> -->
</template>
<!-- 添加/修改页面 将父组件的search方法传递给子组件-->
<add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
</div>
</template>
<script>
import axios from 'axios'
import AddOrUpdate from "./add-or-update";
export default {
data() {
return {
searchForm: {
key: ""
},
form:{},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
showFlag: true,
sfshVisiable: false,
shForm: {},
chartVisiable: false,
addOrUpdateFlag:false,
layouts: ["total","prev","pager","next","sizes","jumper"],
};
},
created() {
this.init();
this.getDataList();
this.contentStyleChange()
},
mounted() {
},
filters: {
htmlfilter: function (val) {
return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
}
},
components: {
AddOrUpdate,
},
methods: {
contentStyleChange() {
this.contentPageStyleChange()
},
// 分页
contentPageStyleChange(){
let arr = []
// if(this.contents.pageTotal) arr.push('total')
// if(this.contents.pageSizes) arr.push('sizes')
// if(this.contents.pagePrevNext){
// arr.push('prev')
// if(this.contents.pagePager) arr.push('pager')
// arr.push('next')
// }
// if(this.contents.pageJumper) arr.push('jumper')
// this.layouts = arr.join()
// this.contents.pageEachNum = 10
},
init () {
},
search() {
this.pageIndex = 1;
this.getDataList();
},
// 获取数据列表
getDataList() {
this.dataListLoading = true;
let params = {
page: this.pageIndex,
limit: this.pageSize,
sort: 'id',
order: 'desc',
}
if(this.searchForm.tizhong!='' && this.searchForm.tizhong!=undefined){
params['tizhong'] = '%' + this.searchForm.tizhong + '%'
}
if(this.searchForm.faburiqistart!='' && this.searchForm.faburiqistart!=undefined ){
params['faburiqistart'] = this.searchForm.faburiqistart
}
if(this.searchForm.faburiqiend!='' && this.searchForm.faburiqiend!=undefined){
params['faburiqiend'] = this.searchForm.faburiqiend
}
this.$http({
url: "jiankangxinxi/page",
method: "get",
params: params
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.data.list;
this.totalPage = data.data.total;
} else {
this.dataList = [];
this.totalPage = 0;
}
this.dataListLoading = false;
});
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
this.getDataList();
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
this.getDataList();
},
// 多选
selectionChangeHandler(val) {
this.dataListSelections = val;
},
// 添加/修改
addOrUpdateHandler(id,type) {
this.showFlag = false;
this.addOrUpdateFlag = true;
this.crossAddOrUpdateFlag = false;
if(type!='info'){
type = 'else';
}
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id,type);
});
},
// 下载
download(file){
window.open(`${file}`)
},
// 删除
deleteHandler(id) {
var ids = id
? [Number(id)]
: this.dataListSelections.map(item => {
return Number(item.id);
});
this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.$http({
url: "jiankangxinxi/delete",
method: "post",
data: ids
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.search();
}
});
} else {
this.$message.error(data.msg);
}
});
});
},
}
};
</script>
<style lang="scss" scoped>
.center-form-pv {
.el-date-editor.el-input {
width: auto;
}
}
.el-input {
width: auto;
}
// form
.center-form-pv .el-input /deep/ .el-input__inner {
border: 1px solid #78ABC3;
border-radius: 0;
padding: 0 12px;
box-shadow: 0px 2px 2px 0px #78ABC3;
outline: none;
color: #000;
width: 100%;
font-size: 14px;
height: 40px;
}
.center-form-pv .el-select /deep/ .el-input__inner {
border: 1px solid #78ABC3;
border-radius: 0;
padding: 0 10px;
box-shadow: 0px 2px 2px 0px #78ABC3;
outline: none;
color: #000;
width: 100%;
font-size: 14px;
height: 40px;
}
.center-form-pv .el-date-editor /deep/ .el-input__inner {
border: 1px solid #78ABC3;
border-radius: 0;
padding: 0 10px 0 30px;
box-shadow: 0px 2px 2px 0px #78ABC3;
outline: none;
color: #000;
width: 100%;
font-size: 14px;
height: 40px;
}
// table
.el-table /deep/ .el-table__header-wrapper thead {
color: #999;
font-weight: 500;
width: 100%;
}
.el-table /deep/ .el-table__header-wrapper thead tr {
background: #93C7B3;
}
.el-table /deep/ .el-table__header-wrapper thead tr th {
padding: 12px 0;
color: #fff;
background: transparent;
border-color: #eee;
border-width: 0 1px 1px 0;
border-style: solid;
text-align: center;
}
.el-table /deep/ .el-table__header-wrapper thead tr th .cell {
padding: 0 10px;
word-wrap: normal;
word-break: break-all;
white-space: normal;
font-weight: bold;
display: inline-block;
vertical-align: middle;
width: 100%;
line-height: 24px;
position: relative;
text-overflow: ellipsis;
}
.el-table /deep/ .el-table__body-wrapper tbody {
width: 100%;
}
.el-table /deep/ .el-table__body-wrapper tbody tr {
background: #fff;
}
.el-table /deep/ .el-table__body-wrapper tbody tr td {
padding: 12px 0;
color: #999;
background: #fff;
border-color: #6F6F97;
border-width: 0 1px 1px 0;
border-style: solid;
text-align: center;
}
.el-table /deep/ .el-table__body-wrapper tbody tr:hover td {
padding: 12px 0;
color: #000;
background: rgba(147, 199, 179, 0.5);
border-color: #6F6F97;
border-width: 0 1px 1px 0;
border-style: solid;
}
.el-table /deep/ .el-table__body-wrapper tbody tr td {
padding: 12px 0;
color: #999;
background: #fff;
border-color: #6F6F97;
border-width: 0 1px 1px 0;
border-style: solid;
text-align: center;
}
.el-table /deep/ .el-table__body-wrapper tbody tr td .cell {
padding: 0 10px;
overflow: hidden;
word-break: break-all;
white-space: normal;
line-height: 24px;
text-overflow: ellipsis;
}
// pagination
.main-content .el-pagination /deep/ .el-pagination__total {
margin: 0 10px 0 0;
color: #666;
font-weight: 400;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .btn-prev {
border: none;
border-radius: 2px;
padding: 0;
margin: 0 5px;
color: #666;
background: #f4f4f5;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
min-width: 35px;
height: 28px;
}
.main-content .el-pagination /deep/ .btn-next {
border: none;
border-radius: 2px;
padding: 0;
margin: 0 5px;
color: #666;
background: #f4f4f5;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
min-width: 35px;
height: 28px;
}
.main-content .el-pagination /deep/ .btn-prev:disabled {
border: none;
cursor: not-allowed;
border-radius: 2px;
padding: 0;
margin: 0 5px;
color: #C0C4CC;
background: #f4f4f5;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .btn-next:disabled {
border: none;
cursor: not-allowed;
border-radius: 2px;
padding: 0;
margin: 0 5px;
color: #C0C4CC;
background: #f4f4f5;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pager {
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
}
.main-content .el-pagination /deep/ .el-pager .number {
cursor: pointer;
padding: 0 4px;
margin: 0 5px;
color: #666;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
border-radius: 2px;
background: #f4f4f5;
text-align: center;
min-width: 30px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pager .number:hover {
cursor: pointer;
padding: 0 4px;
margin: 0 5px;
color: #fff;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
border-radius: 2px;
background: #93C7B3;
text-align: center;
min-width: 30px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pager .number.active {
cursor: default;
padding: 0 4px;
margin: 0 5px;
color: #FFF;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
border-radius: 2px;
background: #93C7B3;
text-align: center;
min-width: 30px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__sizes {
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__sizes .el-input {
margin: 0 5px;
width: 100px;
position: relative;
}
.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
border: 1px solid #DCDFE6;
cursor: pointer;
padding: 0 25px 0 8px;
color: #606266;
display: inline-block;
font-size: 13px;
line-height: 28px;
border-radius: 3px;
outline: 0;
background: #FFF;
width: 100%;
text-align: center;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
top: 0;
position: absolute;
right: 0;
height: 100%;
}
.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
cursor: pointer;
color: #C0C4CC;
width: 25px;
font-size: 14px;
line-height: 28px;
text-align: center;
}
.main-content .el-pagination /deep/ .el-pagination__jump {
margin: 0 0 0 24px;
color: #606266;
display: inline-block;
vertical-align: top;
font-size: 13px;
line-height: 28px;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__jump .el-input {
border-radius: 3px;
padding: 0 2px;
margin: 0 2px;
display: inline-block;
width: 50px;
font-size: 14px;
line-height: 18px;
position: relative;
text-align: center;
height: 28px;
}
.main-content .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
border: 1px solid #DCDFE6;
cursor: pointer;
padding: 0 3px;
color: #606266;
display: inline-block;
font-size: 14px;
line-height: 28px;
border-radius: 3px;
outline: 0;
background: #FFF;
width: 100%;
text-align: center;
height: 28px;
}
</style>
运行效果截图：
其他作品：
扫一扫
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
