一. 内容简介
vue学习路线页面实现,后端暂时没写,后期更新。
二. 软件环境
2.1 Visual Studio Code 1.75.0
2.2 chrome浏览器
2.3 node v18.14.0
三.主要流程
3.1 搭建html结构
3.2 添加css样式
3.3 js代码
3.4 页面展示
3.5 vue组件完整代码
四.具体步骤
4.1 搭建html结构
<div class="all">
<!-- <div class="banner"><img src="@/static/img/learning_banner1.png" alt=""></div> -->
<div class="content_one">
<div class="left">
<ul>
<li>各科学习路线</li>
<li>Java</li>
<li>web前端</li>
<li>大数据</li>
<li>python</li>
<li>物联网</li>
<li>软件测试</li>
<li>网络安全</li>
<li>影视剪辑</li>
<li>UI设计</li>
</ul>
</div>
<div class="right">
<div class="right-item">
<div class="item-tittle item-tittle-one">
<div>第一阶段</div>
<div>Java基础</div>
</div>
<div class="item-content">
<div class="item">
<div class="model-2">Java语言核心基础</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">JavaSE</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Java集合框架</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Java多线程</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">JDK8新特性</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">J方法与数组</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">集合</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">多线程与并发</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">泛型</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">文件与IO</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">反射与内省</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">网络编程</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">Eclipse与异常处理</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">面向对象</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">常用类库API</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
</div>
</div>
<div class="right-item">
<div class="item-tittle">
<div>第二阶段</div>
<div>Java进阶</div>
</div>
<div class="item-content">
<div class="item">
<div class="model-2">Mysql优化和原理</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">Ioc-Aop-整合MyBatis</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Mysql核心技术</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">JDBC</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Servlet</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">JSP</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">JavaScript</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">AJAX前后端交互</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">jQuery</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">bootstrap</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">HTML5</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">CSS3</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Nginx</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-2">bootstrap/layui</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Sentinel</div>
</div>
</div>
</div>
<div class="right-item">
<div class="item-tittle">
<div>第三阶段</div>
<div>Java高级</div>
</div>
<div class="item-content">
<div class="item">
<div class="model-1">Maven</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Git</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Mybatis</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">SpringMVC</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Log</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">Quartz</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">LayUI</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">SSM</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">UNIX</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Docker</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">MyBatis-Plus</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">PageHelper</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Shiro</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">Spring Security</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">Redis</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">iToken反向代理负载</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Zookeeper</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">CDN</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
</div>
</div>
<div class="right-item">
<div class="item-tittle">
<div>第四阶段</div>
<div>Java实战</div>
</div>
<div class="item-content">
<div class="item">
<div class="model-1">锋迷商城案例</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">VUE实战案例</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">项目实战-MyShop</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">高级框架</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-2">微服务架构</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">Springboot框架</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Zookeeper</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-2">B/S 架构后台管理系统</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Kafka集群实战</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">《卖淘乐》后台管理系统</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">微服务电商Java培训课程Java培训课程Java培训课程JVMJava培训课程信息管理系统</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">开放平台</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">阿里框架</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">JVM</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">信息管理系统</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
</div>
</div>
</div>
</div>
<div class="content_two">
</div>
</div>
4.2 添加css样式
/* 初始配置 */
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
img {
display: block;
}
a {
text-decoration: none;
}
h1,h2,h3 {
font-size: 16px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* 浮动 */
.l {
float: left;
}
.r {
float: right;
}
.clear::after {
content:"";
display: block;
clear: both;
}
/* 版心 */
.container {
width: 1080px;
margin: 0 auto;
position: relative;
}
/* 通栏 */
.container-fluid {
width: 100%;
}
.all {
width: 100%;
background-color: #F4F4F4;
padding-top: 20px;
}
.banner {
overflow: hidden;
}
.content_one {
width: 1120px;
margin: 0 auto;
margin-top: 0px;
display: flex;
overflow: hidden;
}
.left {
width: 200px;
background-color: #fff;
height: 430px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.left li:nth-child(1){
height: 47px;
background: #4c8bdc;
font-size: 20px;
color: #fff;
line-height: 47px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
padding-left: 0;
}
.left li{
overflow: hidden;
height: 40px;
font-size: 15px;
line-height: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-left: 20px;
}
.left li:nth-child(2) {
margin-top: 23px;
}
.right {
margin-left: 20px;
width: 900px;
height: 880px;
background-color: #fff;
border-radius: 15px;
margin-bottom: 20px;
}
.right-item {
width: 900px;
height: 210px;
border-bottom: 1px solid #C9CACA;;
display: flex;
}
.right-item-end {
width: 900px;
height: 210px;
display: flex;
}
.item-tittle {
width: 150px;
height: 210px;
background-color: #4c8bdc;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
overflow: hidden;
}
.item-tittle-one {
border-top-left-radius: 15px;
}
.item-tittle div:nth-child(1){
margin-top: 60px;
font-size: 15px;
color: #fff;
}
.item-tittle div:nth-child(2){
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.item-content {
padding-left: 25px;
padding-right: 25px;
}
.item {
margin-top: 10px;
height: 40px;
display: flex;
overflow: hidden;
}
.model-0 {
height: 40px;
width: 20px;
font-size: 13px;
line-height: 40px;
text-align: center;
padding-top: 10px;
background-color: #FFF;
}
.model-1 {
font-size: 13px;
height: 40px;
width: 120px;
line-height: 40px;
text-align: center;
background-color: #EDF3FB;
}
.model-2 {
font-size: 13px;
height: 40px;
width: 260px;
line-height: 40px;
text-align: center;
background-color: #EDF3FB;
}
4.3 js代码
暂时没写,还没接后端,后期更新
4.4 页面展示
4.5 vue组件完整代码
<template>
<div class="all">
<!-- <div class="banner"><img src="@/static/img/learning_banner1.png" alt=""></div> -->
<div class="content_one">
<div class="left">
<ul>
<li>各科学习路线</li>
<li>Java</li>
<li>web前端</li>
<li>大数据</li>
<li>python</li>
<li>物联网</li>
<li>软件测试</li>
<li>网络安全</li>
<li>影视剪辑</li>
<li>UI设计</li>
</ul>
</div>
<div class="right">
<div class="right-item">
<div class="item-tittle item-tittle-one">
<div>第一阶段</div>
<div>Java基础</div>
</div>
<div class="item-content">
<div class="item">
<div class="model-2">Java语言核心基础</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">JavaSE</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Java集合框架</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Java多线程</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">JDK8新特性</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">J方法与数组</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">集合</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">多线程与并发</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">泛型</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">文件与IO</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">反射与内省</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">网络编程</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">Eclipse与异常处理</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">面向对象</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">常用类库API</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
</div>
</div>
<div class="right-item">
<div class="item-tittle">
<div>第二阶段</div>
<div>Java进阶</div>
</div>
<div class="item-content">
<div class="item">
<div class="model-2">Mysql优化和原理</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">Ioc-Aop-整合MyBatis</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Mysql核心技术</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">JDBC</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Servlet</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">JSP</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">JavaScript</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">AJAX前后端交互</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">jQuery</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">bootstrap</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">HTML5</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">CSS3</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Nginx</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-2">bootstrap/layui</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Sentinel</div>
</div>
</div>
</div>
<div class="right-item">
<div class="item-tittle">
<div>第三阶段</div>
<div>Java高级</div>
</div>
<div class="item-content">
<div class="item">
<div class="model-1">Maven</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Git</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Mybatis</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">SpringMVC</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Log</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">Quartz</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">LayUI</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">SSM</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">UNIX</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Docker</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">MyBatis-Plus</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">PageHelper</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Shiro</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">Spring Security</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">Redis</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">iToken反向代理负载</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Zookeeper</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">CDN</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
</div>
</div>
<div class="right-item">
<div class="item-tittle">
<div>第四阶段</div>
<div>Java实战</div>
</div>
<div class="item-content">
<div class="item">
<div class="model-1">锋迷商城案例</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">VUE实战案例</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">项目实战-MyShop</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">高级框架</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-2">微服务架构</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">Springboot框架</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Zookeeper</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-2">B/S 架构后台管理系统</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">Kafka集群实战</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-2">《卖淘乐》后台管理系统</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
<div class="item">
<div class="model-1">微服务电商Java培训课程Java培训课程Java培训课程JVMJava培训课程信息管理系统</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">开放平台</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">阿里框架</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">JVM</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
<div class="model-1">信息管理系统</div>
<div class="model-0"><img src="@/static/img/learning-right.png" alt=""></div>
</div>
</div>
</div>
</div>
</div>
<div class="content_two">
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
/* 初始配置 */
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
img {
display: block;
}
a {
text-decoration: none;
}
h1,h2,h3 {
font-size: 16px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* 浮动 */
.l {
float: left;
}
.r {
float: right;
}
.clear::after {
content:"";
display: block;
clear: both;
}
/* 版心 */
.container {
width: 1080px;
margin: 0 auto;
position: relative;
}
/* 通栏 */
.container-fluid {
width: 100%;
}
.all {
width: 100%;
background-color: #F4F4F4;
padding-top: 20px;
}
.banner {
overflow: hidden;
}
.content_one {
width: 1120px;
margin: 0 auto;
margin-top: 0px;
display: flex;
overflow: hidden;
}
.left {
width: 200px;
background-color: #fff;
height: 430px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.left li:nth-child(1){
height: 47px;
background: #4c8bdc;
font-size: 20px;
color: #fff;
line-height: 47px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
padding-left: 0;
}
.left li{
overflow: hidden;
height: 40px;
font-size: 15px;
line-height: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-left: 20px;
}
.left li:nth-child(2) {
margin-top: 23px;
}
.right {
margin-left: 20px;
width: 900px;
height: 880px;
background-color: #fff;
border-radius: 15px;
margin-bottom: 20px;
}
.right-item {
width: 900px;
height: 210px;
border-bottom: 1px solid #C9CACA;;
display: flex;
}
.right-item-end {
width: 900px;
height: 210px;
display: flex;
}
.item-tittle {
width: 150px;
height: 210px;
background-color: #4c8bdc;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
overflow: hidden;
}
.item-tittle-one {
border-top-left-radius: 15px;
}
.item-tittle div:nth-child(1){
margin-top: 60px;
font-size: 15px;
color: #fff;
}
.item-tittle div:nth-child(2){
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.item-content {
padding-left: 25px;
padding-right: 25px;
}
.item {
margin-top: 10px;
height: 40px;
display: flex;
overflow: hidden;
}
.model-0 {
height: 40px;
width: 20px;
font-size: 13px;
line-height: 40px;
text-align: center;
padding-top: 10px;
background-color: #FFF;
}
.model-1 {
font-size: 13px;
height: 40px;
width: 120px;
line-height: 40px;
text-align: center;
background-color: #EDF3FB;
}
.model-2 {
font-size: 13px;
height: 40px;
width: 260px;
line-height: 40px;
text-align: center;
background-color: #EDF3FB;
}
</style>