vue学习路线页面

一. 内容简介

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>

五. 问题