博客

静态页面练习（pc和移动端两套）

  • Post author:
  • Post category:其他


在这里插入图片描述



网址：

添加链接描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <script src="./import/vue.js"></script>
    <link rel="stylesheet" href="./import/element/index.css">
    <script src="./import/element/index.js"></script>

    <title>平湖卡迪夫公学</title>
    <script src="./import/axios.js"></script>
    <script src="./import/qs.js"></script>
    <!-- pc端样式 -->
    <style>
        /* .el-row {
            margin-bottom: 20px;
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        } */
        body {
            margin: 0;
            padding: 0;
            border: none;
        }

        .all {
            /* position: relative; */
            /* width: 1920px; */
            display: flex;
            justify-content: center;
            align-items: center;
            /* overflow: hidden; */

            /* overflow: hidden; */

            /* height: 5000px; */
            /* background-color: red; */
        }

        .pc-all {
            width: 1920px;
            /* height: 12000px; */
            display: flex;
            /* justify-content: center; */
            align-items: center;
            flex-direction: column;
            overflow: hidden;
        }

        .part-top {
            width: 1920px;
            box-sizing: border-box;
            position: relative;
            display: flex;
            flex-direction: column;
            /* justify-content: center;
            align-items: center; */
        }

        .part-top .top-top {
            width: 1920px;
            height: 70px;
            background: white;
            /* opacity: ; */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .part-top .top-top .top-center {
            width: 68%;
            height: 100%;
            /* background-color: red; */
            display: flex;
            /* justify-content: center; */
            align-items: center;
            position: relative;
        }

        .top-center .center-left {
            /* position: absolute; */
            /* left: 10px;
            top */
            float: left;
            width: 114px;
            height: 50px;
            /* border: 1px saddlebrown solid; */
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/logo.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .top-center .center-right {
            /* float: right; */
            position: absolute;
            right: 0;
            width: 250px;
            height: 23px;
            font-size: 30px;
            font-family: Source Han Serif CN;
            font-weight: 500;
            color: black;
            line-height: 20px;
        }

        .part-top .top-main {
            width: 1920px;
            height: 904px;
            background: #1C2956;
            position: relative;
        }

        .part-top .top-main .right-red {
            width: 308px;
            height: 100%;
            background: #A12024;
            position: absolute;
            right: 132px;
        }

        .part-top .top-main .left-pic {
            position: absolute;
            width: 1560px;
            height: 616px;
            top: 228px;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/top-b.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            left: 0;
        }

        .part-top .top-main .text {
            position: absolute;
            top: 30px;
            left: 300px;
        }

        .part-top .top-main .text1 {
            width: 587px;
            height: 69px;
            font-size: 72px;
            font-family: Source Han Serif CN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 39px;
            text-shadow: 5px 5px 5px rgba(8, 18, 54, 0.53);
        }

        .part-top .top-main .text2 {
            width: 575px;
            height: 14px;
            font-size: 18px;
            font-family: Source Han Serif CN;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 32px;
            margin-bottom: 25px;
        }

        .part-top .top-main .text3 {
            width: 215px;
            height: 65px;
            font-size: 30px;
            font-family: Source Han Serif CN;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 36px;
            position: relative;
            z-index: 999;
            /* text-align: center; */
        }

        .part-top .top-main .text3 .text3-b {
            width: 385px;
            height: 87px;
            background: #1F3170;
            position: absolute;
            left: 60px;
            top: -5px;
            z-index: -1;

        }

        .part-top .top-bottom {

            width: 520px;
            height: 63px;
            background: #1F3170;
            font-size: 30px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 63px;
            position: absolute;
            bottom: -31px;
            left: 700px;
            text-align: center;

        }

        .part1 {
            height: 350px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .part1 .mid {
            height: 100%;
            width: 1200px;
            /* background-color: #1F3170; */
            display: flex;
            /* justify-content: center;
            align-items: center; */
            flex-direction: column;
            position: relative;

        }

        .part1 .mid .right-pic {
            height: 345px;
            width: 600px;
            position: absolute;
            z-index: -2;
            top: 0;
            right: 0px;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part1-pic.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .part1 .mid .text {
            position: absolute;
            top: 80px;
            left: 50px;
            height: 200px;
            width: 400px;
            /* background-color: red; */
            display: flex;
            /* justify-content: center;
            align-items: center; */
            flex-direction: column;
        }

        .part1 .mid .text .text1 {
            width: 220px;
            height: 35px;
            font-size: 36px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #1C2956;
            line-height: 35px;
            padding-bottom: 5px;
            border-bottom: 5px solid #A12024;
            margin-bottom: 15px;
        }

        .part1 .mid .text .each {
            margin-left: 70px;
            margin-bottom: 10px;
            width: 450px;
            height: 35px;
            font-size: 28px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #656565;
            line-height: 35px;
        }

        .part1 .mid .text .each span {
            color: #1C2956;
            margin-right: 23px;
        }

        .part2 {
            width: 100%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-bottom: 50px;
        }

        .part2 .mid {
            width: 959px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            position: relative;
        }

        .part2 .mid .up {
            width: 100%;
            height: 159px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background: #1C2956;
            margin-bottom: 20px;
            font-size: 32px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 51px;
        }

        .part2 .mid .down {
            width: 100%;
            height: 159px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            font-size: 24px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 30px;
        }

        .part2 .mid .down .text1 {
            margin-bottom: 5px;
        }

        .part2 .mid .down .each {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-right: 80px;
            background: #A12024;
            position: relative;
        }

        .part2 .mid .down .each .line {
            width: 4px;
            height: 30px;
            background: #A12024;
            position: absolute;
            right: -40px;
            top: 55px;
        }

        .part2 .mid .down .each3 {
            margin-right: 0;
        }

        .part2 .mid .tips {
            position: absolute;
            right: 0;
            bottom: -25px;
            /* width: 200px; */
            height: 16px;
            font-size: 16px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000000;
            line-height: 25px;
        }

        .part3 {
            width: 100%;
            height: 458px;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part3b.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            padding-bottom: 5px;
        }

        .part3 .roll {
            width: 1600px;
            /* flex: 3; */
            /* background-color: green; */
            height: 100%;
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }

        .part3 .test004 {
            width: 100%;
            height: 100%;
            color: white;
            display: flex;
            justify-content: center;
            /* border: solid 1px; */
            flex-direction: column;
            align-items: center;
        }

        .part3 .testTop {
            /* background-color: aqua; */
            width: 90%;
            height: 30px;
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 26px;
            text-align: center;
            margin-bottom: 20px;
        }

        .part3 .testTop span {
            display: inline-block;
            width: 400px;
        }

        .part3 #box {
            width: 100%;
            height: 240px;
            line-height: 1em;
            /* background-color: skyblue; */
            margin-top: 15px;
            /* margin: 100px auto; */
            padding: 0 0px;
            overflow: hidden;
            /* background-color: #1C2956; */
            /* display: flex;
            justify-content: center;
            align-items: center; */
            padding-left: 260px;

        }

        .part3 #list li {
            margin-top: 10px;
            /* display: inline-block;
            width: 230px; */
            list-style: none;
        }

        .part3 #list span {
            /* margin-right: 30px; */
            font-size: 24px;
            display: inline-block;
            width: 400px;
            /* background-color: skyblue; */
            /* margin-left: 15px; */
            overflow: hidden;
            line-height: 26px;
            text-align: center;
            margin-bottom: 10px;

        }

        .part3 #list .span1 {
            margin-left: 20px;

        }

        .part3 #list .span2 {
            margin-left: 3px;


        }

        .part3 #list .span3 {
            margin-left: 2px;

        }

        .part3 .form2 {
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
            /* background-color: green; */
        }

        .part3 .form .aa {
            /* position: absolute; */
            display: block;
            /* width: 92%; */
            /* height: 100%; */
            /* bottom: 5px; */
            /* background-color: black; */
        }

        .part3 .input {
            width: 390px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 30px;
        }

        .part3 .button {
            width: 267px;
            height: 50px;
            background: #FFFFFF;
            border-radius: 30px;
            background-color: white;
            border: none;
            color: rgb(165, 24, 43);
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #A12024;
            line-height: 50px;
            text-align: center;
        }

        .button:hover {
            /* border-radius: 40px !important; */
            cursor: pointer;
        }

        .part4 {
            width: 100%;
            height: 360px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 50px;
        }

        .part4 .mid {
            width: 1000px;
            height: 360px;
            /* background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part4.png);
            background-repeat: no-repeat;
            background-size: 100% 100%; */
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .part4 .mid .each {
            width: 100%;
            flex: 1;

        }

        .part4 .mid .each1 {
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .part4 .mid .each2 {
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part42.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .part4 .mid .each3 {
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part43.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .part4 .mid .tips {
            /* width: 215px; */
            height: 16px;
            font-size: 16px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #0D2A48;
            line-height: 20px;
            position: absolute;
            bottom: -30px;
            right: 0;
        }

        .part5 {
            width: 1920px;
            height: 250px;
        }

        .part5 .mid {
            margin-left: 178px;
            width: 1316px;
            height: 245px;
            /* background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part5.png);
            background-repeat: no-repeat;
            background-size: 100% 100%; */
            display: flex;
            flex-direction: row;
        }

        .part5 .mid .left {
            height: 100%;
            flex: 1;
            background: #09102F;
            position: relative;
        }

        .part5 .mid .left .line {
            position: absolute;
            top: 203px;
            left: 282px;
            width: 361px;
            height: 5px;
            background: rgb(36, 53, 126);

        }

        .part5 .mid .left .line2 {
            position: absolute;
            top: 65px;
            left: 244px;
            width: 2px;
            height: 116px;
            background: #FFFFFF;

        }

        .part5 .mid .right {
            flex: 1;
            height: 100%;

            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part5.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
        }

        .part5 .mid .right .red {
            width: 383px;
            height: 116px;
            background: #A12024;
            position: absolute;
            top: 70px;
            right: -250px;
            /* z-index: -1; */
        }

        .part5 .mid .left .text {
            position: absolute;
            top: 35px;
            left: 280px;
        }

        .part5 .mid .left .text1 {
            /* width: 294px; */
            height: 26px;
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 36px;
            margin-bottom: 45px;
        }

        .part5 .mid .left .text2 {
            /* height: 58px; */
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #FFFFFF;
            margin-bottom: 5px;

            /* line-height: 34px; */
        }

        .part5 .mid .left .text3 {
            /* height: 58px; */
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #FFFFFF;
            /* line-height: 34px; */
        }

        .part6-title {
            padding-top: 30px;
            background-color: rgb(240, 240, 240) !important;
            margin-bottom: 0 !important;

        }

        .part6 {
            width: 1920px;
            height: 542px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(240, 240, 240);
            padding-bottom: 60px;
        }

        .part6 .mid {
            width: 1310px;
            height: 560px;
            /* background-color: #656565; */
        }

        .part6 .mid .title {
            margin-left: 30px;
            margin-bottom: 30px;
        }

        .part6 .mid .title .up {
            width: 203px;
            /* height: 35px; */
            padding-bottom: 3px;
            font-size: 36px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #1C2956;
            line-height: 43px;
            margin-bottom: 5px;
            border-bottom: 4px solid #A12024;
        }

        .part6 .mid .title .down {
            /* width: 319px; */
            height: 29px;
            font-size: 30px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #1C2956;
            line-height: 43px;
            margin-left: 120px;
        }

        .part6 .mid .content {
            width: 100%;
            height: 420px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            /* background-color: #656565; */
            box-sizing: border-box;
            padding-left: 20px;
        }

        .part6 .mid .content .each {
            width: 388px;
            height: 211px;
            background-color: white;
            margin: 10px;
            position: relative;
            display: flex;
            justify-content: center;
            /* align-items: center; */
            flex-direction: column;
            padding-left: 30px;
            box-sizing: border-box;
        }

        .part6 .mid .content .icon {
            width: 42px;
            height: 37px;
        }

        .part6 .mid .content .icon img {
            width: 100%;
            height: 100%;
        }

        .part6 .mid .content .each .text {
            /* width: 215px; */
            height: 57px;
            font-size: 24px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #656565;
            line-height: 33px;
            margin-top: 10px;
            margin-left: 60px;
            margin-bottom: 50px;
            /* text-align: center; */
        }

        .part6 .mid .content .line {
            width: 203px;
            height: 4px;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part6-line.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-left: 120px;
        }

        .part7 {
            width: 1920px;
            height: 900px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .part7 .mid {
            width: 1310px;
            height: 420px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            /* background-color: #656565; */
            box-sizing: border-box;
            padding-left: 50px;
            margin-bottom: 30px;
        }

        .part7 .mid .each {
            width: 388px;
            height: 211px;
            /* background-color: red; */
            /* margin: 10px; */
            position: relative;
            display: flex;
            justify-content: center;
            /* align-items: center; */
            flex-direction: column;
            /* padding-left: 30px; */
            box-sizing: border-box;
            font-size: 26px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #6E6E6E;
            line-height: 43px;
        }

        .part7 .mid .each img {
            width: 100%;
            height: 100%;
        }

        .part7 .mid .each .text1 {
            position: relative;
            border-left: 14px solid #A12024;
            padding-left: 30px;

        }

        .part7 .mid .each .text2 {
            padding-left: 44px;

        }

        .part7 .bottom {
            width: 1310px;
            height: 425px;
            /* background-color: red; */
            display: flex;
            justify-content: center;
            flex-direction: column;
            margin-top: 30px;
        }

        .part7 .bottom .up {
            width: 100%;
            height: 124px;
            /* background-color: red; */
            display: flex;
            justify-content: center;
            flex-direction: column;
            position: relative;
        }

        .part7 .bottom .up .right {
            position: absolute;
            right: 80px;
            top: 0px;
            width: 134px;
            height: 124px;
            background: #A12024;
        }

        .part7 .bottom .up .text {
            padding-left: 60px;
            width: 810px;
            height: 102px;
            font-size: 24px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #000000;
            line-height: 39px;
        }

        .part7 .bottom .down {
            margin-top: 30px;
            width: 100%;
            height: 230px;
            /* background-color: red; */
            display: flex;
            justify-content: center;
            flex-direction: column;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part7down.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
        }

        .part7 .bottom .down .text1 {
            font-size: 30px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
            margin-bottom: 25px;
        }

        .part7 .bottom .down .text2 {
            font-size: 24px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            margin-bottom: 25px;


        }

        .part7 .bottom .down .text3 {
            font-size: 24px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
        }

        .part8 {
            width: 1920px;
            height: 590px;
            display: flex;
            position: relative;
            box-sizing: border-box;
            /* margin-bottom: 60px; */
        }

        .part8 .left {
            width: 1110px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 535px;
            background: #1C2956;
            box-shadow: 7px 10px 15px 1px rgba(96, 20, 22, 0.43);
        }

        .part8 .left .content {
            display: flex;
            flex-direction: column;
            margin-left: 400px;
        }

        .part8 .left .each {
            display: flex;
            flex-direction: row;
            margin-bottom: 50px;
        }

        .part8 .left .each .icon {
            width: 65px;
            height: 65px;

        }

        .part8 .left .each .icon img {
            width: 100%;
            height: 100%;

        }

        .part8 .left .each .text {
            width: 400px;
            font-size: 26px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            height: 65px;
            text-align: right;
            line-height: 65px;
            margin-right: 30px;
        }

        .part8 .right {
            flex: 1;
            height: 491px;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part8.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-top: 25px;
        }

        .part8 .left .back {
            position: absolute;
            top: 30px;
            left: 30px;
            width: 1110px;
            height: 535px;
            z-index: -1;
            /* height: 71px; */
            background: #A12024;
        }

        .part9 {
            width: 1920px;
            height: 900px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .part9 .mid-up {
            background-color: #F3F3F3;
            height: 513px;
            width: 1200px;
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            box-sizing: border-box;
        }

        .part9 .mid-up .each {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
        }

        .part9 .mid-up .each .head {
            width: 194px;
            height: 235px;
        }

        .part9 .mid-up .each .head img {
            width: 100%;
            height: 100%;
        }

        .part9 .mid-up .each .text1 {
            width: 194px;
            height: 27px;
            font-size: 18px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #000000;
            line-height: 43px;
            text-align: left;
        }

        .part9 .mid-up .each .text2 {
            width: 194px;
            height: 37px;
            font-size: 14px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #636363;
            line-height: 43px;
            /* text-align: left; */

        }

        .part9 .mid-up .each .text3 {
            width: 200px;
            height: 154px;
            font-size: 13px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #9A9A9A;
            line-height: 20px;
            /* margin-bottom: 20px; */
        }

        .part9 .mid-down {
            /* background-color: #F3F3F3; */
            /* height: 503px; */
            width: 1200px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            box-sizing: border-box;
        }

        .part9 .mid-down .each {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
        }

        .part9 .mid-down .each .head {
            width: 214px;
            height: 211px;
        }

        .part9 .mid-down .each .head img {
            width: 100%;
            height: 100%;
        }

        .part9 .mid-down .each .text1 {
            width: 200px;
            height: 30px;
            font-size: 17px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #000000;
            line-height: 30px;
            text-align: left;
        }

        .part9 .mid-down .each .text2 {
            width: 200px;
            height: 48px;
            font-size: 15px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #636363;
            line-height: 20px;
            text-align: left;
            /* margin-bottom: 5px; */

        }

        .part9 .mid-down .each .text3 {
            width: 197px;
            height: 67px;
            font-size: 13px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #9A9A9A;
            line-height: 18px;
            /* margin-bottom: 20px; */
        }

        .part10 {
            width: 1920px;
            /* height: 900px; */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .part10 .mid .leftRed {
            width: 55px;
            height: 573px;
            font-size: 72px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #A12024;
            line-height: 43px;
            position: absolute;
            left: -90px;
            top: 50px;
            writing-mode: vertical-rl;
            transform: rotate(180deg);

        }

        .part10 .mid {
            width: 1130px;
            height: 100%;
            position: relative;
            /* background-color: #9A9A9A; */
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-left: 10px;
        }

        .part10 .mid .each {
            margin: 8px;
            width: 260px;
            height: 430px;
            position: relative;
            /* background-color: red; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

        }

        .part10 .mid .each .pic {
            width: 100%;
            height: 369px;

        }

        .part10 .mid .each .pic img {
            width: 100%;
            height: 369px;

        }

        .part10 .mid .each .btn {
            width: 224px;
            height: 44px;
            background: #232C4C;
            border-radius: 10px;
            font-size: 24px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            line-height: 44px;
            color: white;
            text-align: center;
            margin-top: 15px;

        }

        .part10 .mid .each .btn2 {
            background: #A12024;
        }

        .part11 {
            margin-top: 30px;
            width: 1920px;
            height: 388px;
            background-color: rgb(238, 238, 238);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .part11 .mid {
            width: 1197px;
            height: 302px;
            border: 4px solid #F9F8F8;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part11.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            position: relative;
        }

        .part11 .mid .text1 {
            /* width: 165px;
            height: 15px; */
            font-size: 30px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #000000;
            line-height: 55px;
            margin-bottom: 30px;
        }

        .part11 .mid .text2 {
            display: flex;
            width: 65%;
            margin-bottom: 20px;

        }

        .part11 .mid .text2 div {
            font-size: 20px;
            font-family: Source Han Sans SC;
            font-weight: bolder;
            color: #000000;
            line-height: 23px;
        }

        .part11 .mid .text3 {
            /* width: 165px;
            height: 15px; */
            /* display: flex; */
            width: 65%;
            font-size: 18px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #333333;
            line-height: 38px;
            margin-bottom: 50px;
        }

        .part11 .twoBtn {
            position: absolute;
            bottom: 40px;
            right: 50px;
            /* background-color: red; */
            /* width: 600px; */
        }

        .part11 .twoBtn div {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: bolder;
            font-size: 18px;
            border-radius: 3px;
            width: 150px
        }

        .part11 .twoBtn div:hover {
            cursor: pointer;
        }

        .part11 .twoBtn1 {
            background-color: rgb(158, 32, 33);
            color: white;
            border: 2px solid rgb(158, 32, 33);

        }

        .part11 .twoBtn2 {
            /* box-sizing: border-box; */
            /* background-color: white; */
            background-color: white;
            color: rgb(158, 32, 33);
            border: 2px solid rgb(158, 32, 33);
            /* padding-bottom: 3px; */
            /* line-height: 20px; */
            margin-left: 10px;
        }

        .part12 {
            width: 1920px;
            height: 496px;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part12.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
            /* margin-bottom: 60px; */

        }

        .part12 .mid {
            width: 502px;
            height: 496px;
            background: #030F42;
            opacity: 0.8;
            position: absolute;
            left: 1057px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .part12 .mid .text {
            width: 318px;
            height: 285px;
            font-size: 32px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 75px;
            /* background-color: chocolate; */
        }

        .part13 {
            width: 1920px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* margin-bottom: 60px; */
        }

        .part13 .mid {
            width: 1300px;
            height: 100%;
            /* border: 1px solid salmon; */
            display: flex;

        }

        .part13 .mid .left {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            box-sizing: border-box;
        }

        .part13 .mid .left .text {
            margin-top: 60px;
            width: 432px;
            height: 372px;
            font-size: 18px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #666666;
            line-height: 28px;
            position: relative;
        }

        .part13 .mid .left .text .line1 {
            position: absolute;
            top: -70px;
            width: 384px;
            height: 6px;
            background: #232C4C;
        }

        .part13 .mid .left .text .line2 {
            position: absolute;
            top: -50px;
            width: 220px;
            height: 6px;
            background: #A12024;
        }

        .part13 .mid .right {
            width: 600px;
            height: 495px;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part13.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
        }

        .part13 .mid .right .blue {
            width: 606px;
            height: 487px;
            background: #232C4C;
            position: absolute;
            left: 10px;
            top: 20px;
            z-index: -1;
        }

        .part14 {
            width: 1920px;
            height: 620px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
            box-sizing: border-box;
        }

        .part14 .part-env {
            width: 1216px;
            height: 503px;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/env.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
            z-index: 999;
            margin-bottom: 100px;
        }

        .part14 .part-bottom {
            width: 100%;
            height: 201px;
            background: #444444;
            position: absolute;
            bottom: 0;
            /* position: absolute;
            bottom: 0; */
            /* transform: translate(0,-80px); */
            /* overflow: hidden; */
            /* padding-bottom: -80px; */
        }

        .part14 .part-bottom .bottom {
            position: absolute;
            bottom: 10px;
            left: 400px;
            display: flex;
            flex-direction: row;
        }

        .part14 .part-bottom .bottom .left {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 35px;
        }

        .part14 .part-bottom .bottom .right {
            display: flex;
            flex-direction: column;
            border-left: 1px solid white;
            padding-left: 30px;
            text-align: center;
            padding-top: 10px;

        }

        .part14 .part-bottom .bottom .right .each {
            margin-bottom: 15px;
            display: flex;
            /* justify-content: center;
            align-items: center; */
            flex-direction: row;
            /* width: 72px; */
            /* height: 1px; */
            font-size: 10px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            line-height: 15px;
            text-align: center;
        }

        .part14 .part-bottom .bottom .right .each .icon {
            width: 15px;
            height: 15px;
            /* background: green; */
            margin-right: 15px;
        }

        .part14 .part-bottom .bottom .right .each .icon img {
            width: 100%;
            height: 100%;
        }

        /* 底部通用 */
        .part-title {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            margin-top: 55px;
            margin-bottom: 30px;
            flex-direction: column;
        }

        .part-title .title1 {
            font-size: 40px;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #A12024;
            line-height: 43px;
            text-align: center;
            margin-bottom: 10px;
        }

        .part-title .title2 {
            font-size: 24px;
            font-family: Source Han Serif CN;
            font-weight: 500;
            color: #6E6E6E;
            line-height: 43px;
            text-align: center;
        }

        .btn001 {
            text-align: center;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 80px;
            color: black;
            background-color: white;
            border-radius: 3px;
            border: 1px solid #999999;
        }

        .btn002 {
            text-align: center;
            line-height: 40px;
            display: inline-block;
            margin-left: 10px;
            height: 40px;
            width: 80px;
            color: white;
            background-color: rgb(158, 22, 33);
            border-radius: 3px;
            /* border: 1px solid #999999; */
        }

        .btn00 {
            font-weight: bold;
            font-size: 15px;
        }

        .btn00:hover {
            cursor: pointer;
        }

        /* rule提示 */
        .el-form-item__error {
            color: rgb(0, 51, 21);
        }
    </style>
    <!-- 移动端样式 -->
    <style>
        .mob-all {
            width: 100%;
            overflow: hidden;
            /* height: 600rem; */
        }

        .mob-part1 {
            padding-top: 5rem;
            width: 100%;
            height: 45rem;
            /* background-color: brown; */
            display: flex;
            /* justify-content: center; */
            align-items: center;
            flex-direction: column;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part1.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            position: relative;
        }

        .mob-part1 .text1 .text-up {
            /* width: 340px;
            height: 40px; */
            font-size: 4rem;
            font-family: Source Han Serif CN;
            font-weight: 800;
            color: #1C2956;
            /* line-height: 1.8rem; */
            text-align: center;
        }

        .mob-part1 .text1 .text-down {
            font-size: 1rem;
            font-family: Source Han Serif CN;
            font-weight: bold;
            color: #1C2956;
            line-height: 1.2rem;
            text-align: center;

        }

        .mob-part1 .text2 {
            width: 26rem;
            height: 6rem;
            background: #09102F;
            opacity: 0.82;
            border-radius: 0.5rem;
            /* width: 171px;
            height: 45px; */
            font-size: 1.8rem;
            font-family: Source Han Serif CN;
            font-weight: bold;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            padding: 1rem;
            margin-top: 2rem;
            /* line-height: 24px; */
        }

        .mob-part1 .text3 {
            width: 29rem;
            height: 3.5rem;
            background: #1F3170;
            font-size: 1.6rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            line-height: 3.5rem;
            position: absolute;
            bottom: -1.7rem;
            /* left: 50%; */

        }

        .mob-part2 {
            background-color: rgb(240, 240, 240);
            width: 100%;
            height: 37rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .mob-part2 .pic {
            width: 32rem;
            height: 14rem;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part2.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .mob-part2 .text {
            width: 32rem;
            height: 8rem;
            margin-top: 1.2rem;
            padding-left: 3.2rem;
        }

        .mob-part2 .text .title {
            width: 14rem;
            /* height: 3rem; */
            font-size: 2rem;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #1C2956;
            /* line-height: 23px; */
            border-bottom: 0.5rem #A12024 solid;
            margin-bottom: 1rem;
        }

        .mob-part2 .text .te {
            /* width: 202px;
            height: 57px; */
            font-size: 1.5rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #656565;
            margin-bottom: 0.5rem;
            margin-left: 5rem;
            /* line-height: 2; */
        }

        .mob-part2 .text .te span {
            margin-right: 2rem;
            color: #1C2956;
        }

        .mob-part3 {
            width: 100%;
            height: 20rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            /* border: 1px solid rebeccapurple; */
            padding-bottom: 2rem;
        }

        .mob-part3 .up {
            width: 25rem;
            height: 8rem;
            background: #030F42;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 1.6rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 2rem;
            /* line-height: 2rem; */
        }

        .mob-part3 .down {
            width: 100%;
            height: 7rem;
            /* background: #030F42; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            box-sizing: border-box;
            position: relative;
            /* line-height: 18px; */
        }

        .mob-part3 .down .tips {
            /* width: 7rem; */
            /* height: 6px; */
            font-size: 0.5rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #000000;
            /* line-height: 13px; */
            position: absolute;
            bottom: -2rem;
            transform: scale(0.7);
            right: -1rem;
        }

        .mob-part3 .down .each {
            flex: 1;
            height: 7rem;
            /* background: #030F42; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #A12024;
            font-size: 1.2rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #FFFFFF;
            position: relative;
            /* line-height: 18px; */
        }

        .mob-part3 .down .each .line {
            position: absolute;
            width: 0.2rem;
            height: 1.9rem;
            background: #A12024;
            left: -0.7rem;
        }

        .mob-part4 {
            height: 20rem;
            width: 100%;
            /* background-color: #780104; */
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part4.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            margin-top: 2rem;
        }

        .mob-part4 .roll {
            width: 100%;
            height: 100%;
            /* flex: 3; */
            /* background-color: green; */
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mob-part4 .test004 {
            /* margin-top: 15px; */
            /* background-color: red; */
            height: 100%;

            width: 100%;
            /* text-align: center; */
            /* font-weight: bold; */
            /* font-size: 21px; */
            color: white;
            display: flex;
            justify-content: center;
            /* border: solid 1px; */
            flex-direction: column;
            align-items: center;
        }

        .mob-part4 .testTop {
            /* background-color: aqua; */
            width: 93%;
            font-size: 1.3rem;
            height: 3rem;
            display: block;
            font-weight: 400;
            /* padding-left: 20px;
            padding-top: 15px; */
            padding-top: 1.5rem;
            text-align: center;
            margin-bottom: 1rem;
            display: flex;
            margin-left: 1rem;
        }

        .mob-part4 .testTop span {
            display: inline-block;
            /* width: 230px; */
            flex: 1;
        }

        .mob-part4 #box {
            width: 100%;
            height: 100%;
            /* height: 25rem; */
            /* background-color: #03421d; */
            overflow: hidden;
        }


        .mob-part4 #list li {
            /* margin-top: 10px; */
            /* display: inline-block;
            width: 230px; */
            font-size: 1.2rem;

            width: 100%;
            height: 1.5rem;

            display: flex;
            /* flex-direction: row;  */
            list-style: none;
            /* text-align: left; */
            box-sizing: border-box;
            /* border: 1px solid beige; */
            /* padding-left: 15rem; */
        }

        .mob-part4 #list li span {
            /* margin-right: 30px; */
            display: inline-block;
            /* width: 15rem; */
            /* background-color: skyblue; */
            margin-left: -3rem;
            overflow: hidden;
            text-align: center;
            /* padding-left: -10rem; */

        }

        .mob-part4 #list li .span1 {
            /* margin-right: 3rem; */
            width: 15rem;

        }

        .mob-part4 #list li .span2 {
            /* margin-right: 3rem; */
            width: 17rem;

        }

        .mob-part4 #list li .span3 {
            /* margin-right: 3rem; */
            width: 15rem;

        }

        .mob-part5 {
            width: 100%;
            height: 19rem;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part5.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
            border: 1px solid bisque;

        }

        .mob-part5 .tips {
            position: absolute;
            bottom: 1.8rem;
            right: -1rem;
            font-size: 0.1rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #0D2A48;
            /* line-height: 8px; */
            transform: scale(0.7);
        }

        .mob-part6 {
            width: 100%;
            height: 13rem;
            display: flex;
            position: relative;
        }

        .mob-part6 .left {
            flex: 1;
            height: 13rem;
            background: #09102F;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
            /* position: absolute;
            right: -1rem; */
        }

        .mob-part6 .left div {
            margin-left: 2.5rem;
            width: 17rem;
            /* height: 2.3rem; */
            font-size: 1.1rem;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #FFFFFF;
            margin-bottom: 0.5rem;
            /* line-height: 18px; */
        }

        .mob-part6 .left .bigger {
            font-size: 1.3rem;
            font-family: Source Han Sans CN;
            font-weight: 600;
            margin-bottom: 1.3rem;
        }

        .mob-part6 .left .line1 {
            width: 1px;
            height: 6.1rem;
            background: #FFFFFF;
            position: absolute;
            left: -1.2rem;
            top: 4rem;
        }

        .mob-part6 .left .line2 {
            width: 15rem;
            height: 3px;
            background: #FFFFFF;
            position: absolute;
            left: 0rem;
            bottom: 1rem;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/line2.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .mob-part6 .right {
            flex: 1;
            height: 13rem;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part6.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .mob-part6 .back {
            position: absolute;
            width: 100%;
            height: 13rem;
            top: 0.7rem;
            background: #A12024;
            z-index: -1;
        }

        .mob-part7 {
            margin-top: 3rem;
            width: 100%;
            height: 30rem;
            background-color: rgb(242, 242, 242);
            padding-top: 0.1rem;
        }

        .mob-part7 .title01 {
            width: 9rem;
            font-size: 2rem;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #1C2956;
            border-bottom: 0.5rem solid #A12024;
            /* line-height: 15px; */
            margin-left: 2rem;
            margin-bottom: 0.6rem;

        }

        .mob-part7 .title02 {
            font-size: 1.3rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #1C2956;
            margin-left: 5rem;
            margin-bottom: 0.8rem;
            /* line-height: 15px; */
        }

        .mob-part7 .main {
            display: flex;
            width: 100%;
            height: 15rem;
            flex-wrap: wrap;
            margin-left: 0.2rem;
        }

        .mob-part7 .main .each {
            display: flex;
            /* margin: 0.1rem; */
            width: 32%;
            height: 8rem;
            background-color: white;
            border-radius: 0.8rem;
            /* justify-content: center;
            align-items: center; */
            flex-direction: column;
            margin-bottom: 0.5rem;
            position: relative;

        }

        .mob-part7 .main .eachR {
            margin-right: 0.6rem;
            /* background-color: red; */

        }

        .mob-part7 .main .each .icon {
            width: 1.5rem;
            height: 1.3rem;
            margin: 0.8rem auto 0.6rem 0.8rem;
        }

        .mob-part7 .main .each .icon img {
            width: 100%;
            height: 100%;

        }

        .mob-part7 .main .each .text {
            font-size: 1rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #656565;
            transform: scale(0.8);
            margin-left: 0.3rem;
            width: 100%;
            /* line-height: 15px; */

        }

        .mob-part7 .main .each .line {
            width: 8.6rem;
            height: 0.2rem;
            position: absolute;
            bottom: 1.9rem;
            right: 1rem;
            /* z-index: 999; */
        }

        .mob-part7 .main .each .line img {
            width: 100%;
            height: 100%;

        }

        .mob-part8 {
            width: 100%;
            height: 40rem;
            margin-top: 2rem;
        }

        .mob-part8 .each {
            width: 100%;
            height: 12rem;
            display: flex;
        }

        .mob-part8 .each .left {
            width: 21rem;
            height: 12rem;

        }

        .mob-part8 .each .left img {
            width: 100%;
            height: 100%;

        }

        .mob-part8 .each .right {
            box-sizing: border-box;
            flex: 1;
            height: 12rem;
            font-size: 1.3rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #6E6E6E;
            display: flex;
            justify-content: center;
            /* align-items: center; */
            flex-direction: column;
            /* background-color: #030F42; */
            /* line-height: 22px; */
        }

        .mob-part8 .each .right div {
            width: 15rem;
            margin-bottom: 0.5rem;
            margin-left: 3rem;
            /* padding-left: 3rem; */
            position: relative;
            /* background-color: red; */
        }

        .mob-part8 .each .right .text .line {
            position: absolute;
            width: 1rem;
            height: 2rem;
            background: #A12024;
            left: -6rem;
            top: 0;

        }

        .mob-part8 .each .right .text .line2 {
            position: absolute;
            width: 1rem;
            height: 2rem;
            background: #A12024;
            right: 0rem;
            top: 0;

        }

        .mob-part9 {
            width: 100%;
            height: 14rem;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part9.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            position: relative;
            padding-bottom: 5rem;
        }

        .mob-part9 .text {
            width: 32rem;
            font-size: 0.9rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            /* line-height: 17px; */
        }

        .mob-part9 .bigger {
            font-size: 1.5rem;
            font-family: Source Han Sans SC;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .mob-part9 .btn {
            position: absolute;
            width: 8.5rem;
            height: 2.1rem;
            color: white;
            background-color: rgb(161, 31, 36);
            font-size: 1.1rem;
            font-family: Source Han Sans SC;
            font-weight: 600;
            margin-bottom: 1rem;
            text-align: center;
            line-height: 2.1rem;
            bottom: 1.5rem;
            right: 4rem;
        }

        .mob-part10 {
            width: 100%;
            height: 25rem;
            background: #1C2956;
            box-shadow: 4px 5px 8px 0px rgba(96, 20, 22, 0.43);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            padding-top: 1rem;
            margin-bottom: 5rem;
        }

        .mob-part10 .back {
            width: 100%;
            height: 25rem;
            background: #A12024;
            position: absolute;
            top: 2rem;
            z-index: -1;
        }

        .mob-part10 .each {
            height: 3rem;
            /* width: 22rem; */
            font-size: 1.5rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 3rem;
            display: flex;
            margin-bottom: 2rem;
        }

        .mob-part10 .each .text {
            width: 22rem;
        }

        .mob-part10 .each .icon {
            width: 3rem;
            height: 3rem;
            margin-right: 3rem;
        }

        .mob-part10 .each .icon img {
            width: 100%;
            height: 100%;
        }

        .mob-part11 {
            width: 100%;
            height: 38rem;
            padding-top: 2rem;
            background-color: rgb(240, 240, 240);
        }

        .mob-part11-card .each {
            background-color: rgb(240, 240, 240);

            display: flex;
            flex-direction: row;
            margin-top: -2rem;
        }

        .mob-part11-card .each .each-inside {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
        }

        .mob-part11-card .each .each-inside .head {
            width: 12rem;
            height: 14rem;
            margin-bottom: 1rem;

        }

        .mob-part11-card .each .each-inside .content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;

        }

        .mob-part11-card .each .each-inside .head img {
            width: 100%;
            height: 100%;

        }

        .mob-part11-card .each .each-inside .text {
            width: 17rem;
            font-size: 1.1rem;
            color: #9A9A9A;
            text-align: center;
            margin-bottom: 0.5rem;
        }

        .mob-part11-card .each .each-inside .text1 {
            color: black;
            font-size: 1.5rem;
            font-weight: bolder;
        }

        .mob-part11-card .each .each-inside .text2 {
            color: #636363;
            font-size: 1.2rem;
            font-weight: bolder;
            height: 3rem;
        }

        .mob-part11-card .each .each-inside .text3 {
            height: 11rem;
        }

        .mob-part12 {
            width: 100%;
            /* height: 30rem; */
            display: flex;
            flex-direction: column;
        }

        .mob-part12 .up {
            flex: 1;
            width: 100%;
            display: flex;
            margin-bottom: 3rem;
        }

        .mob-part12 .down {
            flex: 1;
            width: 100%;
            display: flex;
        }

        .mob-part12 .each {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }

        .mob-part12 .each .pic {
            width: 100%;
            height: 11rem;
            margin-bottom: 1rem;
        }

        .mob-part12 .each .pic img {
            width: 100%;
            height: 100%;
        }

        .mob-part12 .each .line {
            margin-bottom: 1rem;
            width: 100%;
            height: 1.8rem;
            background: #232C4C;
        }

        .mob-part12 .each .text {
            text-align: center;
            width: 9rem;
            height: 2.5rem;
            line-height: 2.5rem;
            background: #232C4C;
            border-radius: 0.5rem;
            color: white;

        }

        .mob-part13 {
            width: 100%;
            height: 16rem;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part13.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
            box-sizing: border-box;
        }

        .mob-part13 .right {
            width: 16rem;
            height: 16rem;
            background-color: rgb(31, 37, 79);
            position: absolute;
            right: 1.6rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #FFFFFF;
            padding-top: 1rem;
            box-sizing: border-box;

            /* line-height: 24px; */
        }

        .mob-part13 .right .text div {
            width: 13rem;
            margin-bottom: 0.8rem;
        }

        .mob-part14 {
            width: 100%;
            /* height: 24rem; */

            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 3rem;
        }

        .mob-part14 .mid {
            width: 90%;
            /* height: 22rem; */
            /* background-color: #636363; */
        }

        .mob-part14 .mid .line1 {
            width: 20rem;
            height: 0.5rem;
            margin-bottom: 1rem;
            background: #232C4C;
        }

        .mob-part14 .mid .line2 {
            margin-bottom: 2rem;
            width: 11rem;
            height: 0.5rem;
            background: #A12024;
        }

        .mob-part14 .mid .text {
            font-size: 1rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            margin-bottom: 1rem;
            color: #666666;
            /* line-height: 15px; */
        }

        .mob-part14 .mid .pic {
            margin-top: 2rem;
            width: 33rem;
            height: 15rem;
            background-image: url(https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part14.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
        }

        .mob-part14 .mid .pic .back {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 1rem;
            left: 1rem;
            background: #232C4C;
            z-index: -1;
        }

        .mob-part15 {
            width: 100%;
            height: 19rem;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
        }

        .mob-part15 .left {
            flex: 1;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

        }

        .mob-part15 .left .each {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .mob-part15 .left .each .l1 {
            width: 18.8rem;
            height: 100%;
            margin-right: 0.5rem;
        }

        .mob-part15 .left .each .l2 {
            flex: 1;
            height: 100%;
        }

        .mob-part15 .left .each .l3 {
            flex: 1;
            height: 100%;
            margin-right: 0.5rem;
        }

        .mob-part15 .left .each .l4 {
            flex: 1;
            margin-right: 0.5rem;
            height: 100%;
        }

        .mob-part15 .left .each .l5 {
            flex: 1;
            height: 100%;
        }

        .mob-part15 img {
            height: 100%;
            width: 100%;
        }

        .mob-part15 .right {
            width: 9.4rem;
            height: 100%;
            /* background-color: #030F42; */
            box-sizing: border-box;
            margin-left: 0.5rem;
            display: flex;
            flex-direction: column;

        }

        .mob-part15 .right .line {
            height: 1.7rem;
            width: 100%;
            background-color: #030F42;
            margin-bottom: 0.5rem;

        }

        .mob-part15 .right .pic {
            flex: 1;
            width: 100%;

        }

        .mob-part-bottom {
            width: 100%;
            height: 9rem;
            background-color: #444444;
            margin-top: 2.5rem;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mob-part-bottom .bottom {
            /* position: absolute;
            bottom: 1rem;
            left: 2rem; */
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            /* padding-left: 3rem; */
            /* background-color: red; */
        }

        .mob-part-bottom .bottom .left {
            box-sizing: border-box;
            /* margin-right: 1rem; */
            display: flex;
            align-items: center;
            justify-content: center;
            /* margin-right: 3rem; */
            flex: 1;
            /* padding-left: 1rem; */
        }

        .mob-part-bottom .bottom .left div {
            width: 7rem;
            height: 3.2rem;
            /* background-color: red; */
            /* margin-left: 3rem; */
        }

        .mob-part-bottom .bottom .right {
            box-sizing: border-box;
            width: 75%;
            display: flex;
            flex-direction: column;
            border-left: 0.1rem solid white;
            /* padding-left: -3rem; */
            text-align: center;
            padding-top: 1rem;
            position: relative;
            /* background-color: red; */
        }

        .mob-part-bottom .bottom .right .contain {
            position: absolute;
            top: 1.5rem;
            left: 0rem;
            /* background-color: red; */
        }

        .mob-part-bottom .bottom .right .each {
            margin-bottom: 0.5rem;
            display: flex;
            /* justify-content: center;
            align-items: center; */
            flex-direction: row;
            /* width: 72px; */
            /* height: 1px; */
            font-size: 0.7rem;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #999999;
            /* transform: scale(0.8); */

            /* line-height: 15px; */
            text-align: center;
        }

        .mob-part-bottom .bottom .right .each .text {
            width: 30rem;
            text-align: left;
        }

        .mob-part-bottom .bottom .right .each .icon {
            width: 1.5rem;
            height: 1.5rem;
            /* background: green; */
            margin-right: 1rem;
        }

        .mob-part-bottom .bottom .right .each .icon img {
            width: 100%;
            height: 100%;
        }

        /* 底部通用 */
        .mob-part-title {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: white; */
            margin-top: 2rem;
            margin-bottom: 1rem;
            flex-direction: column;
        }

        .mob-part-title .title1 {
            font-size: 2rem;
            font-family: Source Han Sans SC;
            font-weight: 600;
            color: #A12024;
            /* line-height: 43px; */
            text-align: center;
            margin-bottom: 0.3rem;
        }

        .mob-part-title .title2 {
            font-size: 0.9rem;
            font-family: Source Han Serif CN;
            font-weight: 500;
            color: #6E6E6E;
            /* line-height: 43px; */
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="all" id="app">
        <div v-if="isPC" class="pc-all">
            <div class="part-top">
                <div class="top-top">
                    <div class="top-center">
                        <div class="center-left"></div>
                        <div class="center-right">
                            PINGHU平湖
                        </div>
                    </div>
                </div>
                <div class="top-main">
                    <div class="right-red"></div>
                    <div class="left-pic"></div>
                    <div class="text">
                        <div class="text1">
                            平湖卡迪夫公学
                        </div>
                        <div class="text2">
                            PINGHU CARDIEF AND VALE COLLEGE
                        </div>
                        <div class="text3">
                            中英合作办学 全球名校敲门砖
                            <div class="text3-b"></div>
                        </div>
                    </div>

                </div>
                <div class="top-bottom">
                    覆盖世界QS100大学升学方向
                </div>
            </div>
            <div class="part1">
                <div class="mid">
                    <div class="text">
                        <div class="text1">英国高中学籍</div>
                        <div class="each"><span>▼</span>入学即注册英国卡迪夫公学学籍</div>
                        <div class="each"><span>▼</span>高中毕业证全球认可</div>
                        <div class="each"><span>▼</span>英国本土G5大学录取优势</div>
                    </div>
                    <div class="right-pic"></div>
                </div>
            </div>
            <div class="part-title">
                <div class="title1">
                    升学硕果
                </div>
                <div class="title2">TEACHING ACHIEVEMENTS</div>
            </div>
            <div class="part2">
                <div class="mid">
                    <div class="up">
                        <div class="text1">2022届学术方向毕业生世界排名TOP100</div>
                        <div class="text2">预录取率100%!</div>
                    </div>
                    <div class="down">
                        <div class="each">
                            <div class="text1">世界排名前十大学
                            </div>
                            <div class="text2">预录取比例33%</div>
                            <div class="line"></div>
                        </div>
                        <div class="each">
                            <div class="text1">世界排名前三十大学
                            </div>
                            <div class="text2">预录取比例75%</div>
                            <div class="line"></div>
                        </div>
                        <div class="each each3">
                            <div class="text1">世界排名前五十大学
                            </div>
                            <div class="text2">预录取比例92%</div>
                        </div>
                    </div>
                    <div class="tips">*数据来自卡迪夫中国校区</div>
                </div>
            </div>
            <div class="part3">
                <div class="roll">
                    <!-- <div class="test003"> -->
                    <div class="test004">
                        <div class="testTop"><span class="span1">姓名</span>
                            <span class="span2">预录取学校(面邀)</span>
                            <span class="span3">QS排名</span>
                        </div>
                        <div id="box">
                            <ul id="list">
                                <li><span class="span1">李*阳</span>
                                    <span class="span2">剑桥大学</span>
                                    <span class="span3">3</span>
                                <li>
                                <li><span class="span1">陈*尧</span>
                                    <span class="span2">伦敦大学学院</span>
                                    <span class="span3">8</span>
                                <li>
                                <li><span class="span1">孙*琳</span>
                                    <span class="span2">伦敦大学学院</span>
                                    <span class="span3">8</span>
                                <li>
                                <li><span class="span1">张*博</span>
                                    <span class="span2">伦敦大学学院</span>
                                    <span class="span3">8</span>
                                <li>
                                <li><span class="span1">邵*晨</span>
                                    <span class="span2">伦敦大学学院</span>
                                    <span class="span3">8</span>
                                <li>
                                <li><span class="span1">朱*恩</span>
                                    <span class="span2">爱丁堡大学</span>
                                    <span class="span3">16</span>
                                <li>
                                <li><span class="span1">李*阳</span>
                                    <span class="span2">康奈尔大学</span>
                                    <span class="span3">21</span>
                                <li>
                                <li><span class="span1">巢*玮</span>
                                    <span class="span2">香港大学</span>
                                    <span class="span3">22</span>
                                <li>
                                <li><span class="span1">朱*天</span>
                                    <span class="span2">多伦多大学</span>
                                    <span class="span3">26</span>
                                <li>
                                <li><span class="span1">邵*晨</span>
                                    <span class="span2">曼彻斯特大学</span>
                                    <span class="span3">27</span>
                                <li>
                                <li><span class="span1">是*蕾</span>
                                    <span class="span2">曼彻斯特大学</span>
                                    <span class="span3">27</span>
                                <li>
                                <li><span class="span1">孙*琳</span>
                                    <span class="span2">曼彻斯特大学</span>
                                    <span class="span3">27</span>
                                <li>
                                <li><span class="span1">朱*天</span>
                                    <span class="span2">曼彻斯特大学</span>
                                    <span class="span3">27</span>
                                <li>
                            </ul>
                        </div>
                    </div>
                    <!-- </div> -->
                </div>
                <div class="form">
                    <el-form :inline="true" :model="form" ref="form" class="demo-form-inline aa" :rules="formRules">
                        <el-form-item label="" prop="name">
                            <el-input v-model="form.name" placeholder="请填写姓名" class="input"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="phone">
                            <el-input v-model="form.phone" placeholder="请填写电话" class="input"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="" prop="kc">
                            <el-select v-model="form2.kc" placeholder="请选择课程" style="width:200px">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item>
                            <div class="button" @click="submitOne" v-if='showBtn1' style="width:200px">免费报名</div>
                            <div class="button" style="width:200px;background-color: #0D2A48;" v-if='!showBtn1'>免费报名
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="part4">
                <div class="mid">
                    <div class="each each1"></div>
                    <div class="each each2"></div>
                    <div class="each each3"></div>
                    <div class="tips">*以上是部分预录取学校的校徽</div>
                </div>
            </div>
            <div class="part-title">
                <div class="title1">
                    办学优势
                </div>
                <div class="title2">SCHOOL RUNNING ADVANTAGES</div>
            </div>
            <div class="part5">
                <div class="mid">
                    <div class="left">
                        <div class="line"></div>
                        <div class="line2"></div>
                        <div class="text">
                            <div class="text1">英国剑桥考试局认证考点：
                            </div>
                            <div class="text2">平湖卡迪夫公学剑桥（CAIE）</div>
                            <div class="text3">考试局授权编号：CX091</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="red"></div>
                    </div>
                </div>
            </div>
            <div class="part-title part6-title">
                <div class="title1">
                    多元国际课程
                </div>
                <div class="title2">DIVERSIFIED INTERNATIONAL COURSES</div>
            </div>
            <div class="part6">
                <div class="mid">
                    <div class="title">
                        <div class="up">国际IG班</div>
                        <div class="down">覆盖140个国家升学方向</div>
                    </div>
                    <div class="content">
                        <div class="each">
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part61.png" alt="">
                            </div>
                            <div class="text">
                                <div>英国卡迪夫公学同步</div>
                                <div>高中课程</div>
                            </div>
                            <div class="line"></div>
                        </div>
                        <div class="each">
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part62.png" alt="">
                            </div>
                            <div class="text">
                                <div>采用剑桥考试局</div>
                                <div>A Level课程体系</div>
                            </div>
                            <div class="line"></div>
                        </div>
                        <div class="each">
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part63.png" alt="">
                            </div>
                            <div class="text">
                                <div>丰富的高科技AI智能</div>
                                <div>和STEM机器人项目</div>
                            </div>
                            <div class="line"></div>
                        </div>
                        <div class="each">
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part64.png" alt="">
                            </div>
                            <div class="text">
                                <div>高端文学/戏剧项目</div>
                                <div>LAMDA课程</div>
                            </div>
                            <div class="line"></div>
                        </div>
                        <div class="each">
                            <div class="icon" style="width: 33px;
                            height: 40px;"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part65.png" alt="">
                            </div>
                            <div class="text">
                                <div>各类包括iGEM、AMC</div>
                                <div>等世界一流竞赛</div>
                            </div>
                            <div class="line"></div>
                        </div>
                        <div class="each">
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part66.png" alt="">
                            </div>
                            <div class="text">
                                <div>申请英、澳、加、美</div>
                                <div>等国家大学</div>
                            </div>
                            <div class="line"></div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="part-title">
                <div class="title1">
                    国际艺术班
                </div>
                <div class="title2">INTERNATIONAL ART CLASS</div>
            </div>
            <div class="part7">
                <div class="mid">
                    <div class="each">
                        <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part71.png" alt="">
                    </div>
                    <div class="each">
                        <div class="text1">协助学生开设个人艺术
                        </div>
                        <div class="text2">作品展览</div>
                    </div>
                    <div class="each"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part72.png"
                            alt=""></div>
                    <div class="each">
                        <div class="text1">辅导学生2年作品集</div>
                        <div style="color: white;" class="text2">.</div>
                    </div>
                    <div class="each"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part73.png"
                            alt=""></div>
                    <div class="each">
                        <div class="text1">一对一定制升学指导</div>
                        <div class="text2">明确想要学习的艺术专业</div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="up">
                        <div class="text">
                            学校在2021昌浙江省美术联考中再创佳绩∶摘得状元1名（综合总分96分)，榜表1名（综合故分95分)，综合总分分以上129位。单科90分以上162人，其中单科状元30人:素描状元3人，色彩状元11人。速写状元16人。
                        </div>
                        <div class="right"></div>
                    </div>
                    <div class="down">
                        <div class="text1">专业团队教学成果</div>
                        <div class="text2">庆应义塾大学、早稻田大学、法政大学、</div>
                        <div class="text3">明治大学、京都精华大学......</div>
                    </div>
                </div>
            </div>
            <div class="part-title">
                <div class="title1">
                    全球名校升学通道
                </div>
                <div class="title2">ENTRANCE CHANNEL OF GLOBAL FAMOUS SCHOOLS</div>
            </div>
            <div class="part8">
                <div class="left">
                    <div class="content">
                        <div class="each">
                            <div class="text">牛剑爬藤班，冲刺全球顶级名校</div>
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part81.png" alt="">
                            </div>
                        </div>
                        <div class="each">
                            <div class="text">英国本土优秀大学录取优势</div>
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part81.png" alt="">
                            </div>
                        </div>
                        <div class="each">
                            <div class="text">世界优秀大学预科项目申请</div>
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part81.png" alt="">
                            </div>
                        </div>
                        <div class="each" style=" margin-bottom: 0">
                            <div class="text">对接140个国家16000所大学</div>
                            <div class="icon"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/part81.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="back"></div>
                </div>
                <div class="right"></div>

            </div>
            <div class="part-title">
                <div class="title1">
                    师资团队
                </div>
                <div class="title2">FACULTY TEAM</div>
            </div>
            <div class="part9">
                <div class="mid-up">
                    <div class="each">
                        <div class="head">
                            <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/head1.png" alt="">
                        </div>
                        <div class="text1">赵均宁</div>
                        <div class="text2">毅进卡迪夫公学总校长</div>
                        <div class="text3">历任外国语学校、A-Level学校、双语学校、IB学校(创校)校长，熟悉国际教育，熟知IB、IGCSE、A-Level、Common
                            Core、AP等课程体系，曾任中国教育学会外语教学专业委员会常务理事、上海国际学校评审专家组组长，评审沪上多所知名国际学校。</div>
                    </div>
                    <div class="each">
                        <div class="head">
                            <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/head2.png" alt="">
                        </div>
                        <div class="text1">Kevin</div>
                        <div class="text2">学术运营管理委员会运营总监</div>
                        <div class="text3">14 年大学讲师, 在教育、培训以及管理领域拥有 35 年的从业经验，精通 A-level、法律、企业管理，在企业和学校都有着非常丰富的管理经验。
                        </div>
                    </div>
                    <div class="each">
                        <div class="head">
                            <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/head3.png" alt="">
                        </div>
                        <div class="text1">李大生</div>
                        <div class="text2">首席升学指导官</div>
                        <div class="text3">
                            深耕A-level教育7年。2020年其所带26名毕业生14人升入G5大学，3人升入南洋理工大学。2021届毕业生55人收获剑桥大学预录取2枚，伦敦政经院5枚帝国理工学院74枚，伦敦大学学院38枚，曼彻斯特大学40枚。
                        </div>
                    </div>
                </div>
                <div class="mid-down">
                    <div class="each">
                        <div class="head">
                            <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/head01.png" alt="">
                        </div>
                        <div class="text1">Ross James Gibson</div>
                        <div class="text2">生物学科学学士，PGCE
                            和QTS教学认证</div>
                        <div class="text3">12年英语和科学教学经验，自信热情，教学极具感染力，教学方法灵活，因材施教，深受学生喜爱</div>
                    </div>
                    <div class="each">
                        <div class="head">
                            <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/head02.png" alt="">
                        </div>
                        <div class="text1">Laroche Jr Jackie</div>
                        <div class="text2">教育学硕士</div>
                        <div class="text3">英语专业学士教学经验丰富，帮助多名学生通过雅思写作、口语考试</div>
                    </div>
                    <div class="each">
                        <div class="head">
                            <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/head03.png" alt="">
                        </div>
                        <div class="text1">Oleksandr Shyrietkov</div>
                        <div class="text2">专业足球运动员</div>
                        <div class="text3">5年工作经验，教学幽默，方法灵活，积极阳光，深受学生喜爱</div>
                    </div>
                    <div class="each">
                        <div class="head">
                            <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/head04.png" alt="">
                        </div>
                        <div class="text1">张婷</div>
                        <div class="text2">南京师范大学文学硕士</div>
                        <div class="text3">10年国际化学校教学经验和学科主任经验</div>
                    </div>
                    <div class="each">
                        <div class="head">
                            <img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/head05.png" alt="">
                        </div>
                        <div class="text1">裴晓静</div>
                        <div class="text2">马来西亚理科大学数学硕士</div>
                        <div class="text3">多年IGCSE数学，A level数学、进阶数学教学经验，具有马来西亚理科大学数学全英教学经验</div>
                    </div>
                </div>
            </div>
            <div class="part-title">
                <div class="title1">
                    高端国际圈层社团活动
                </div>
                <div class="title2">HIGH END INTERNATIONAL COMMUNITY ACTIVITIES</div>
            </div>
            <div class="part10">
                <div class="mid">
                    <div class="leftRed">INTERNATIONAL</div>
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/act1.png"
                                alt=""></div>
                        <div class="btn">击剑</div>
                    </div>
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/act2.png"
                                alt=""></div>
                        <div class="btn btn2">马术</div>
                    </div>
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/act3.png"
                                alt=""></div>
                        <div class="btn ">高尔夫球</div>
                    </div>
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/act4.png"
                                alt=""></div>
                        <div class="btn btn2">乐高</div>
                    </div>
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/act5.png"
                                alt=""></div>
                        <div class="btn">皮划艇</div>
                    </div>
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/act6.png"
                                alt=""></div>
                        <div class="btn btn2">MSP火星实验室</div>
                    </div>
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/act7.png"
                                alt=""></div>
                        <div class="btn">生物共享实验室</div>
                    </div>
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/act8.png"
                                alt=""></div>
                        <div class="btn btn2">LAMDA英国戏剧</div>
                    </div>
                </div>
            </div>
            <div class="part11">
                <div class="mid">

                    <div class="text1">平湖卡迪夫公学<span style="color: #A02023;margin-left:5px">预约看校 申请</span></div>

                    <div class="text2">
                        <div>国际AP班/国际A—Lever班</div>
                        <!-- <div class="left"></div> -->
                    </div>
                    <div class="text3">
                        <el-row>
                            <el-col :span="9">
                                <div>招生状态：正在招生</div>
                            </el-col>
                            <el-col :span="9">
                                <div>录取方式：笔试+面试</div>
                            </el-col>
                            <el-col :span="6">
                                <div>招生对象：新高一</div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <div>学籍：英国</div>
                            </el-col>
                            <el-col :span="9">
                                <div>授课方式：纯英文</div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="twoBtn">
                        <div class="twoBtn1" @click="showDia">查 看 简 章</div>
                        <div class="twoBtn2" @click="showDia">预 约 看 校</div>
                    </div>

                </div>
            </div>
            <div class="part-title">
                <div class="title1">
                    学校特色
                </div>
                <div class="title2">SCHOOL CHARACTERISTICS</div>
            </div>
            <div class="part12">
                <div class="mid">
                    <div class="text">20多年集团办学经验“一带一路”教育引进纯正英式国际教育中澳预科办学新阵地</div>
                </div>
            </div>
            <div class="part-title">
                <div class="title1">
                    学校简介
                </div>
                <div class="title2">SCHOOL PROFILE</div>
            </div>
            <div class="part13">
                <div class="mid">
                    <div class="left">
                        <div class="text">
                            <div class="line1"></div>
                            <div class="line2"></div>
                            <div style="margin-bottom:50px ;">
                                英国卡迪夫公学是英国排名前5的公立学校，位于景色绮丽的威尔士首府卡迪夫市，是威尔士议会重点发展的学校。学校共有30000名在校生，每年约有数千位国际学生就读，受到英国威尔士政府、英国文化协会、卡迪夫市政府、英国剑桥国际考试委员会的高度认可。
                            </div>
                            <div>
                                平湖卡迪夫公学是建立在英式精英教育的学术基础上，又集合了中国传统文化、中华优良传统美德，以及中国基础教育的特点的一所“新型国际化学校”，学校采用全球最大、最具影响力的，被誉为“金牌”教育课程和全球大学入学标准的A
                                Level国际高中课程。
                                自成立以来，平湖卡迪夫公学一直都受到英国威尔士政府和英国驻华领事馆的高度重视和支持。</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="blue"></div>
                    </div>
                </div>
            </div>
            <div class="part-title">
                <div class="title1">
                    学校环境
                </div>
                <div class="title2">SCHOOL ENVIRONMENT</div>
            </div>
            <div class="part14">

                <div class="part-env">

                </div>
                <div class="part-bottom">
                    <div class="bottom">
                        <div class="left">
                            <div><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/logo2.png" alt="">
                            </div>

                        </div>
                        <div class="right">
                            <div class="each">
                                <div class="icon"><img
                                        src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/bottom1.png"
                                        alt=""></div>
                                <div class="text">平湖市毅进卡迪夫公学高级中学</div>
                            </div>
                            <div class="each">
                                <div class="icon"><img
                                        src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/bottom2.png"
                                        alt=""></div>
                                <div class="text"> 浙江省嘉兴市平湖市钟埭街道福善线福臻段188号</div>
                            </div>
                            <div class="each">
                                <div class="icon"><img
                                        src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/bottom3.png"
                                        alt=""></div>
                                <div class="text">400-600-7883</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <el-dialog title="" :visible.sync="dialogVisible" width="30%" closed="handleClose">
                <el-form ref="form2" :model="form2" :rules="form2Rules">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form2.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="form2.phone" placeholder="请填写电话"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <a href="http://test.cavc-cn.com/statement/index.html" target="_blank"
                            style="color: red;margin-left: 10px; ">《隐私政策》</a>
                    </el-form-item>
                    <!-- <el-form-item label="课程" prop="kc">
                        <el-select v-model="form2.kc" placeholder="请选择课程" style="width: 100%;">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <div @click="dialogVisible = false" class="btn001 btn00">取 消</div>
                    <div @click="submitTwo" class="btn002 btn00" v-if="showBtn2">确 定</div>
                    <div class="btn002 btn00" v-if="!showBtn2" style="background-color:#0D2A48;">确 定</div>
                </span>
            </el-dialog>
        </div>
        <div v-if="!isPC" class="mob-all">
            <div class="mob-part1">
                <div class="text1">
                    <div class="text-up">平 湖 卡 迪 夫 公 学</div>
                    <div class="text-down">P I N G H U <span style="margin-left: 0.5rem;"></span>C A R D I E F <span
                            style="margin-left: 0.5rem;"></span>A N D <span style="margin-left: 0.5rem;"></span>V A L E
                        <span style="margin-left: 0.5rem;"></span>C O L L E G E</div>
                </div>
                <div class="text2">
                    <div class="text-up">中 英 合 作 办 学</div>
                    <div class="text-down">全 球 名 校 敲 门 砖</div>
                </div>
                <div class="text3">
                    覆 盖 世 界 Q S 1 0 0 大 学 升 学 方 向
                </div>
            </div>
            <div class="mob-part2">
                <div class="pic"></div>
                <div class="text">
                    <div class="title">英国高中学籍</div>
                    <div class="te te1"><span>▼</span>入学即注册英国卡迪夫公学学籍</div>
                    <div class="te te2"><span>▼</span>高中毕业证全球认可</div>
                    <div class="te te3"><span>▼</span>英国本土G5大学录取优势</div>
                </div>
            </div>
            <div class="mob-part-title">
                <div class="title1">
                    升学成果
                </div>
                <div class="title2">ACADEMIC ACHIEVEMENTS</div>
            </div>
            <div class="mob-part3">
                <div class="up">
                    <div>2022届学术方向毕业生</div>
                    <div>世界排名TOP100</div>
                    <div>预录取率100%!</div>
                </div>
                <div class="down">
                    <div class="tips">*数据来自卡迪夫中国校区</div>
                    <div class="each" style="margin-right: 1.2rem;">
                        <div>世界排名前三十大学</div>
                        <div>预录取比例75%</div>
                    </div>
                    <div class="each" style="margin-right: 1.2rem;background: #030F42;">
                        <div>世界排名前五十大学</div>
                        <div>预录取比例92%</div>
                        <div class="line"></div>
                    </div>
                    <div class="each">
                        <div>世界排名前十大学</div>
                        <div>预录取比例33%</div>
                        <div class="line"></div>

                    </div>
                </div>
            </div>
            <div class="mob-part4">
                <div class="roll">
                    <!-- <div class="test003"> -->
                    <div class="test004">
                        <div class="testTop">
                            <span class="span1">姓名</span>
                            <span class="span2">预录取学校（面邀）</span>
                            <span class="span3">QS排名</span>
                        </div>
                        <div id="box">
                            <ul id="list">
                                <li><span class="span1">李*阳</span>
                                    <span class="span2">剑桥大学</span>
                                    <span class="span3">3</span>
                                <li>
                                <li><span class="span1">陈*尧</span>
                                    <span class="span2">伦敦大学学院</span>
                                    <span class="span3">8</span>
                                <li>
                                <li><span class="span1">孙*琳</span>
                                    <span class="span2">伦敦大学学院</span>
                                    <span class="span3">8</span>
                                <li>
                                <li><span class="span1">张*博</span>
                                    <span class="span2">伦敦大学学院</span>
                                    <span class="span3">8</span>
                                <li>
                                <li><span class="span1">邵*晨</span>
                                    <span class="span2">伦敦大学学院</span>
                                    <span class="span3">8</span>
                                <li>
                                <li><span class="span1">朱*恩</span>
                                    <span class="span2">爱丁堡大学</span>
                                    <span class="span3">16</span>
                                <li>
                                <li><span class="span1">李*阳</span>
                                    <span class="span2">康奈尔大学</span>
                                    <span class="span3">21</span>
                                <li>
                                <li><span class="span1">巢*玮</span>
                                    <span class="span2">香港大学</span>
                                    <span class="span3">22</span>
                                <li>
                                <li><span class="span1">朱*天</span>
                                    <span class="span2">多伦多大学</span>
                                    <span class="span3">26</span>
                                <li>
                                <li><span class="span1">邵*晨</span>
                                    <span class="span2">曼彻斯特大学</span>
                                    <span class="span3">27</span>
                                <li>
                                <li><span class="span1">是*蕾</span>
                                    <span class="span2">曼彻斯特大学</span>
                                    <span class="span3">27</span>
                                <li>
                                <li><span class="span1">孙*琳</span>
                                    <span class="span2">曼彻斯特大学</span>
                                    <span class="span3">27</span>
                                <li>
                                <li><span class="span1">朱*天</span>
                                    <span class="span2">曼彻斯特大学</span>
                                    <span class="span3">27</span>
                                <li>
                            </ul>
                        </div>
                    </div>
                    <!-- </div> -->
                </div>
            </div>
            <div class="mob-part5">
                <div class="tips">*以上是部分预录取学校的校徽</div>
            </div>
            <div class="mob-part-title">
                <div class="title1">
                    考点认证
                </div>
                <div class="title2">SCHOOL RUNNING ADVANTAGES</div>
            </div>
            <div class="mob-part6">
                <div class="left">
                    <div class="bigger">英国剑桥考试局认证考点：</div>
                    <div>平湖卡迪夫公学剑桥（CAIE）</div>
                    <div>考试局授权编号：CX091</div>
                    <div class="line1"></div>
                    <div class="line2"></div>
                </div>
                <div class="right"></div>
                <div class="back"></div>
            </div>
            <div class="mob-part7">
                <div class="mob-part-title" style="margin-top: 1rem;">
                    <div class="title1">
                        多元国际课程
                    </div>
                    <div class="title2">DIVERSIFIED INTERNATIONAL COURSES</div>
                </div>
                <div class="title01">
                    国际IG班
                </div>
                <div class="title02">
                    覆盖140个国家升学方向
                </div>
                <div class="main">
                    <div class="each eachR">
                        <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/logo1.png"
                                alt=""></div>
                        <div class="text">英国卡迪夫公学同步</div>
                        <div class="text">高中课程</div>
                        <div class="line"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/line.png"
                                alt=""></div>
                    </div>
                    <div class="each eachR">
                        <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/logo2.png"
                                alt=""></div>
                        <div class="text">采用剑桥考试局</div>
                        <div class="text">A Level课程体系</div>
                        <div class="line"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/line.png"
                                alt=""></div>
                    </div>
                    <div class="each">
                        <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/logo3.png"
                                alt=""></div>
                        <div class="text">丰富的高科技AI智能</div>
                        <div class="text">和STEM机器人项目</div>
                        <div class="line"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/line.png"
                                alt=""></div>
                    </div>
                    <div class="each eachR">
                        <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/logo4.png"
                                alt=""></div>
                        <div class="text">高端文学/戏剧项目</div>
                        <div class="text">LAMDA课程</div>
                        <div class="line"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/line.png"
                                alt=""></div>
                    </div>
                    <div class="each eachR">
                        <div class="icon" style="width: 1.3rem;
                        height: 1.5rem;"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/logo5.png"
                                alt=""></div>
                        <div class="text">各类包括iGEM、AMC</div>
                        <div class="text">等世界一流竞赛</div>
                        <div class="line"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/line.png"
                                alt=""></div>
                    </div>
                    <div class="each">
                        <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/logo6.png"
                                alt=""></div>
                        <div class="text">申请英、澳、加、美</div>
                        <div class="text">等国家大学</div>
                        <div class="line"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/line.png"
                                alt=""></div>
                    </div>
                </div>
            </div>
            <div class="mob-part-title">
                <div class="title1">
                    国际艺术班
                </div>
                <div class="title2">INTERNATIONAL ART CLASS</div>
            </div>
            <div class="mob-part8">
                <div class="each">
                    <div class="left"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part81.png"
                            alt=""></div>
                    <div class="right">
                        <div class="text">
                            <div class="line"></div>协助学生开设个人艺术
                        </div>
                        <div class="text2">作品展览</div>
                    </div>
                </div>
                <div class="each">
                    <div class="right">
                        <div class="text">
                            <div class="line2"></div>辅导学生2年作品集
                        </div>
                    </div>
                    <div class="left"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part81.png"
                            alt=""></div>

                </div>
                <div class="each">
                    <div class="left"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/part83.png"
                            alt=""></div>
                    <div class="right">
                        <div class="text">
                            <div class="line"></div>一对一定制升学指导
                        </div>
                        <div class="text2">明确想要学习的艺术专业</div>
                    </div>
                </div>
            </div>
            <div class="mob-part9">
                <div class="text bigger">专业团队教学成果</div>
                <div class="text">庆应义塾大学、早稻田大学、法政大学、</div>
                <div class="text">明治大学、京都精华大学......</div>
                <div class="btn" @click="more">了 解 更 多</div>
            </div>
            <div class="mob-part-title">
                <div class="title1">
                    全球名校升学通道
                </div>
                <div class="title2">ENTRANCE CHANNEL OF GLOBAL FAMOUS SCHOOLS</div>
            </div>
            <div class="mob-part10">
                <div class="back"></div>
                <div class="each">
                    <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/icon1.png"
                            alt=""></div>
                    <div class="text">牛剑爬藤班，冲刺全球顶级名校</div>
                </div>
                <div class="each">
                    <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/icon2.png"
                            alt=""></div>
                    <div class="text">英国本土优秀大学录取优势</div>
                </div>
                <div class="each">
                    <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/icon3.png"
                            alt=""></div>
                    <div class="text">世界优秀大学预科项目申请</div>
                </div>
                <div class="each">
                    <div class="icon"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/icon4.png"
                            alt=""></div>
                    <div class="text">对接140个国家16000所大学</div>
                </div>
            </div>
            <div class="mob-part-title">
                <div class="title1">
                    师资团队
                </div>
                <div class="title2">FACULTY TEAM</div>
            </div>
            <div class="mob-part11">

                <el-carousel indicator-position="outside" class="mob-part11-card" height="36rem" :interval="5000"
                    ref="slideCarousel2" id="switch2" arrow="always">
                    <el-carousel-item class="each">
                        <div class="each-inside">
                            <div class="head"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/头像/01.jpg" alt="">
                            </div>
                            <div class="content">
                                <div class="text text1">李大生</div>
                                <div class="text text2">首席升学指导官</div>
                                <div class="text text3">
                                    深耕A-level教育7年。2020年其所带26名毕业生14人升入G5大学,3人升入南洋理工大学。2021届毕业生55人收获剑桥大学预录取2枚,伦敦政经院5枚帝国理工学院74枚,伦敦大学学院38枚,曼彻斯特大学40枚。
                                </div>
                            </div>

                        </div>
                        <div class="each-inside">
                            <div class="head"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/头像/02.png" alt="">
                            </div>
                            <div class="content">
                                <div class="text text1">赵均宁</div>
                                <div class="text text2">毅进卡迪夫公学总校长</div>
                                <div class="text text3">
                                    历任外国语学校、A-Level学校、双语学校、IB学校(创校)校长，熟悉国际教育,熟知IB、IGCSE、A-Level、CommonCore、AP等课程体系，曾任中国教育学会外语教学专业委员会常务理事、上海国际学校评审专家组组长，评审沪上多所知名国际学校。
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item class="each">
                        <div class="each-inside">
                            <div class="head"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/头像/03.png" alt="">
                            </div>
                            <div class="content">
                                <div class="text text1">Kevin</div>
                                <div class="text text2">学术运营管理委员会运营总监</div>
                                <div class="text text3">
                                    14 年大学讲师, 在教育、培训以及管理领域拥有 35 年的从业经验精通A-level 、法律、企业管理，在企业和学校都有着非常丰富的管理经验。
                                </div>
                            </div>

                        </div>
                        <div class="each-inside">
                            <div class="head"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/头像/1.jpg" alt="">
                            </div>
                            <div class="content">
                                <div class="text text1">Ross James Gibson</div>
                                <div class="text text2">生物学科学学士，PGCE 和QTS教学认证</div>
                                <div class="text text3">
                                    12年英语和科学教学经验，自信热情，教学极具感染力，教学方法灵活，因材施教，深受学生喜爱
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item class="each">
                        <div class="each-inside">
                            <div class="head"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/头像/2.jpg" alt="">
                            </div>
                            <div class="content">
                                <div class="text text1">Laroche Jr Jackie</div>
                                <div class="text text2">教育学硕士</div>
                                <div class="text text3">
                                    英语专业学士教学经验丰富，帮助多名学生通过雅思写作、口语考试
                                </div>
                            </div>

                        </div>
                        <div class="each-inside">
                            <div class="head"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/头像/3.jpg" alt="">
                            </div>
                            <div class="content">
                                <div class="text text1">Oleksandr Shyrietkov</div>
                                <div class="text text2">专业足球运动员</div>
                                <div class="text text3">
                                    5年工作经验，教学幽默，方法灵活，积极阳光，深受学生喜爱
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                    <el-carousel-item class="each">
                        <div class="each-inside">
                            <div class="head"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/头像/4.jpg" alt="">
                            </div>
                            <div class="content">
                                <div class="text text1">张婷</div>
                                <div class="text text2">南京师范大学文学硕士</div>
                                <div class="text text3">
                                    10年国际化学校教学经验和学科主任经验
                                </div>
                            </div>

                        </div>
                        <div class="each-inside">
                            <div class="head"><img
                                    src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/头像/5.jpg" alt="">
                            </div>
                            <div class="content">
                                <div class="text text1">裴晓静</div>
                                <div class="text text2">马来西亚理科大学数学硕士</div>
                                <div class="text text3">
                                    多年IGCSE数学，A level数学、进阶数学教学经验，具有马来西亚理科大学数学全英教学经验
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>

            </div>
            <div class="mob-part-title">
                <div class="title1">
                    国际性社团活动
                </div>
                <div class="title2">INTERNATIONAL COMMUNITY ACTIVITIES</div>
            </div>
            <div class="mob-part12">
                <div class="up">
                    <div class="each">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/tab1.png"
                                alt=""></div>
                        <div class="line"></div>
                        <div class="text">击剑</div>
                    </div>
                    <div class="each" style="margin-left: 0.5rem;">
                        <div class="line" style="background-color:#A12024 ;"></div>

                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/tab2.png"
                                alt=""></div>
                        <div class="text" style="background-color:#A12024 ;">马术</div>
                    </div>
                    <div class="each" style="margin-left: 0.5rem;margin-right: 0.5rem;">
                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/tab3.png"
                                alt=""></div>
                        <div class="line"></div>
                        <div class="text">高尔夫球</div>
                    </div>
                    <div class="each">
                        <div class="line" style="background-color:#A12024 ;"></div>

                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/tab4.png"
                                alt=""></div>
                        <div class="text" style="background-color:#A12024 ;">乐高</div>
                    </div>
                </div>
                <div class="down">
                    <div class="each">
                        <div class="line" style="background-color:#A12024 ;"></div>

                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/tab5.png"
                                alt=""></div>
                        <div class="text">皮划艇</div>
                    </div>
                    <div class="each" style="margin-left: 0.5rem;">

                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/tab6.png"
                                alt=""></div>
                        <div class="line"></div>

                        <div class="text" style="background-color:#A12024 ;">MSP火星实验室</div>
                    </div>
                    <div class="each" style="margin-left: 0.5rem;margin-right: 0.5rem;">
                        <div class="line" style="background-color:#A12024 ;"></div>

                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/tab7.png"
                                alt=""></div>
                        <div class="text">生物共享实验室</div>
                    </div>
                    <div class="each">

                        <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/tab8.png"
                                alt=""></div>
                        <div class="line"></div>

                        <div class="text" style="background-color:#A12024 ;">LAMDA英国戏剧</div>
                    </div>
                </div>
            </div>
            <div class="mob-part-title">
                <div class="title1">
                    学校特色
                </div>
                <div class="title2">SCHOOL CHARACTERISTICS</div>
            </div>
            <div class="mob-part13">
                <div class="right">
                    <div class="text">
                        <div>20多年集团办学经验</div>
                        <div>“一带一路”教育引进</div>
                        <div>纯正英式国际教育</div>
                        <div>中澳预科办学新阵地</div>
                    </div>
                </div>
            </div>
            <div class="mob-part-title">
                <div class="title1">
                    学校简介
                </div>
                <div class="title2">SCHOOL PROFILE</div>
            </div>
            <div class="mob-part14">
                <div class="mid">
                    <div class="line1"></div>
                    <div class="line2"></div>
                    <div class="text">
                        英国卡迪夫公学是英国排名前5的公立学校，位于景色绮丽的威尔士首府卡迪夫市，是威尔士议会重点发展的学校。学校共有30000名在校生，每年约有数千位国际学生就读，受到英国威尔士政府、英国文化协会、卡迪夫市政府、英国剑桥国际考试委员会的高度认可。
                    </div>
                    <div class="text">
                        平湖卡迪夫公学是建立在英式精英教育的学术基础上，又集合了中国传统文化、中华优良传统美德，以及中国基础教育的特点的一所“新型国际化学校”，学校采用全球最大、最具影响力的，被誉为“金牌”教育课程和全球大学入学标准的A
                        Level国际高中课程。</div>
                    <div class="text">自成立以来，平湖卡迪夫公学一直都受到英国威尔士政府和英国驻华领事馆的高度重视和支持。</div>
                    <div class="pic">
                        <div class="back"></div>
                    </div>
                </div>
            </div>
            <div class="mob-part-title">
                <div class="title1">
                    学校环境
                </div>
                <div class="title2">SCHOOL ENVIRONMENT</div>
            </div>
            <div class="mob-part15">
                <div class="left">
                    <div class="each" style="margin-bottom: 0.5rem;">
                        <div class="l1"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/l1.png"
                                alt=""></div>
                        <div class="l2"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/l2.png"
                                alt=""></div>
                    </div>
                    <div class="each">
                        <div class="l3"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/l3.png"
                                alt=""></div>
                        <div class="l4"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/l4.png"
                                alt=""></div>
                        <div class="l5"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/l5.png"
                                alt=""></div>
                    </div>
                </div>
                <div class="right">
                    <div class="line"></div>
                    <div class="pic"><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/r.png" alt="">
                    </div>
                </div>
            </div>
            <div class="mob-part-bottom">
                <div class="bottom">
                    <div class="left">
                        <div><img src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageMob/logb.png" alt=""
                                style="width: 100%;height:100%"></div>

                    </div>
                    <div class="right">
                        <div class="contain">
                            <div class="each">
                                <div class="icon"><img
                                        src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/bottom1.png"
                                        alt=""></div>
                                <div class="text">平湖市毅进卡迪夫公学高级中学</div>
                            </div>
                            <div class="each">
                                <div class="icon"><img
                                        src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/bottom2.png"
                                        alt=""></div>
                                <div class="text"> 浙江省嘉兴市平湖市钟埭街道福善线福臻段188号</div>
                            </div>
                            <div class="each">
                                <div class="icon"><img
                                        src="https://cavc-ph.oss-cn-hangzhou.aliyuncs.com/pub/imageNew/bottom3.png"
                                        alt=""></div>
                                <div class="text">400-600-7883</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="" :visible.sync="dialogVisibleMob" width="90%" closed="handleClose">
            <el-form ref="mobForm" :model="mobForm" :rules="mobFormRules">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="mobForm.name" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="mobForm.phone" placeholder="请填写电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <span
                        style="color: red;margin-left: 10px; font-size: 1rem;">*我们承诺采取严密的安全措施保护您的个人信息！</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div @click="dialogVisibleMob = false" class="btn001 btn00">取 消</div>
                <div @click="submitMob" class="btn002 btn00">确 定</div>
            </span>
        </el-dialog>
    </div>
</body>
<script>
    axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
    new Vue({
        el: '#app',
        data: function () {
            return {
                loadingMob: false,
                loadingPC1: false,
                loadingPC2: false,
                showBtn1: true,
                showBtn2: true,
                dialogVisible: false,
                dialogVisibleMob: false,
                isPC: true,
                form: {
                    source: '0', //PC端
                    name: '',
                    phone: '',
                    kc: ''
                },
                url: '/api/default/zhong-kao',
                mobForm: {
                    source: '1',
                    name: '',
                    phone: '',

                },
                mobFormRules: {
                    name: [{
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    }],
                    phone: [{
                            required: true,
                            message: "请输入手机号",
                            trigger: "blur"
                        },
                        {
                            min: 11,
                            max: 11,
                            message: "请输入11位电话号码",
                            trigger: "blur"
                        },
                        {
                            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                            message: "请输入正确的电话号码",
                        },
                    ]
                },
                formRules: {
                    name: [{
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    }],
                    kc: [{
                        required: true,
                        message: "请选择课程",
                        trigger: "change"
                    }],
                    phone: [{
                            required: true,
                            message: "请输入手机号",
                            trigger: "blur"
                        },
                        {
                            min: 11,
                            max: 11,
                            message: "请输入11位电话号码",
                            trigger: "blur"
                        },
                        {
                            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                            message: "请输入正确的电话号码",
                        },
                    ]
                },
                form2: {
                    source: '0', //PC端
                    name: '',
                    phone: '',
                    kc: ''
                },
                form2Rules: {
                    name: [{
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    }],
                    kc: [{
                        required: true,
                        message: "请选择课程",
                        trigger: "change"
                    }],
                    phone: [{
                            required: true,
                            message: "请输入手机号",
                            trigger: "blur"
                        },
                        {
                            min: 11,
                            max: 11,
                            message: "请输入11位电话号码",
                            trigger: "blur"
                        },
                        {
                            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                            message: "请输入正确的电话号码",
                        },
                    ]
                },
            }
        },
        beforeCreate() {
            // this.browserRedirect()
        },
        created() {
            this.browserRedirect()
        },
        mounted() {
            if (this.$refs.slideCarousel2) {
                this.slideBanner2()
            }
            var box = document.getElementById('box')
            var list = document.getElementById('list')
            // console.log(box, 'box')
            //复制一遍文档
            var content = list.innerHTML;
            list.innerHTML += content;

            var time = 20;
            var timer = setInterval(up, time);

            function up() {
                // console.log('1111')
                //滚上去的内容大于ul内容高度的一半，重置高度 0
                if (box.scrollTop > (list.offsetHeight >> 1)) {
                    box.scrollTop = 0
                } else {
                    box.scrollTop++;
                }
            }

        },
        methods: {
            loadMe(num) {

                var loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if (num == 'close') {
                    console.log('关闭')
                    loading.close();
                }

            },
            closeLoad() {

                console.log('关闭loading')
            },
            slideBanner2() {
                //选中的轮播图
                // var box = document.querySelector('.el-carousel__container');
                // console.log( box ,'boxxxxx')
                var box = document.getElementById('switch2')
                // console.log( box2 ,'boxxxxx222')

                var startPoint = 0;
                var stopPoint = 0;
                //重置坐标
                var resetPoint = function () {
                    startPoint = 0;
                    stopPoint = 0;
                }
                //手指按下
                box.addEventListener("touchstart", function (e) {
                    //手指点击位置的X坐标
                    startPoint = e.changedTouches[0].pageX;
                });
                //手指滑动
                box.addEventListener("touchmove", function (e) {
                    //手指滑动后终点位置X的坐标
                    stopPoint = e.changedTouches[0].pageX;
                });
                //当手指抬起的时候，判断图片滚动离左右的距离
                let that = this
                box.addEventListener("touchend", function (e) {
                    if (stopPoint == 0 || startPoint - stopPoint == 0) {
                        resetPoint();
                        return;
                    }
                    if (startPoint - stopPoint > 0) {
                        resetPoint();
                        that.$refs.slideCarousel2.next();
                        return;
                    }
                    if (startPoint - stopPoint < 0) {
                        resetPoint();
                        that.$refs.slideCarousel2.prev();
                        return;
                    }
                });
            },
            showDia() {
                this.dialogVisible = true
            },
            more() {
                this.dialogVisibleMob = true
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            submitMob() {
                const that = this

                this.$refs['mobForm'].validate((valid) => {
                    if (valid) {
                        // var loading = that.$loading({
                        //     lock: true,
                        //     text: 'Loading',
                        //     spinner: 'el-icon-loading',
                        //     background: 'rgba(0, 0, 0, 0.7)'
                        // });
                        this.loadMe()
                        

                        // console.log(this.form, 'form')
                        let qs = Qs;
                        const bb = qs.stringify(this.mobForm)
                        // console.log(bb, 'bb')

                        axios({
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded'
                                },
                                method: 'post',
                                url: this.url,
                                data: qs.stringify(this.mobForm)
                            }).then(function (res) {
                                that.loadMe('close')
                                console.log(res, '接口返回')

                                if (res.data.code == 200) {
                                    that.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    that.dialogVisibleMob = false
                                } else {
                                    console.log('123')

                                    that.$message({
                                        message: res.data.message,
                                        type: 'error'
                                    });
                                }

                            })
                            .catch(function (error) {
                                // console.log('123123')
                                that.loadMe('close')
                                that.$message({
                                    message: '请重试',
                                    type: 'error'
                                });
                            });

                    }

                });

            },
            submitOne() {
                const that = this
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loadMe()
                        this.showBtn1 = false
                        console.log(this.form, 'form')
                        let qs = Qs;
                        const bb = qs.stringify(this.form)
                        // console.log(bb, 'bb')

                        axios({
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded'
                                },
                                method: 'post',
                                url: this.url,
                                data: qs.stringify(this.form)
                            }).then(function (res) {
                                console.log(res, '接口返回')
                                that.loadMe('close')

                                if (res.data.code == 200) {
                                    that.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                } else {
                                    console.log('123')

                                    that.$message({
                                        message: res.data.message,
                                        type: 'error'
                                    });
                                }

                            })
                            .catch(function (error) {
                                that.loadMe('close')

                                // console.log('123123')
                                that.$message({
                                    message: '请重试',
                                    type: 'error'
                                });
                            });

                    }

                });

            },
            submitTwo() {
                let qs = Qs;
                const that = this

                this.$refs['form2'].validate((valid) => {
                    if (valid) {
                        this.showBtn2 = false
                        this.loadMe()

                        axios({
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded'
                                },
                                method: 'post',
                                url: this.url,
                                data: qs.stringify(this.form2)
                            }).then(function (res) {
                                that.loadMe('close')

                                console.log(res.code)

                                if (res.data.code == 200) {
                                    that.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    that.dialogVisible = false
                                } else {
                                    that.$message({
                                        message: res.data.message,
                                        type: 'error'
                                    });
                                }

                            })
                            .catch(function (error) {
                                that.loadMe('close')

                                that.$message({
                                    message: '请重试',
                                    type: 'error'
                                });
                            });
                    }

                });

            },
            //判断进入页面时是手机端还是PC端
            browserRedirect() {
                var sUserAgent = navigator.userAgent.toLowerCase();
                var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                var bIsMidp = sUserAgent.match(/midp/i) == "midp";
                var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                var bIsAndroid = sUserAgent.match(/android/i) == "android";
                var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

                if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                    //得到手机屏幕的宽度
                    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
                    console.log('htmlWidth', htmlWidth)
                    //得到html的Dom元素
                    let htmlDom = document.getElementsByTagName('html')[0];
                    // if(htmlWidth>640){//超过640大小的，字体根部都是16px
                    //   htmlWidth=640;
                    //   console.log('htmlWidth-true',htmlWidth)
                    // }
                    //设置根元素字体大小
                    htmlDom.style.fontSize = htmlWidth / 40 + 'px';
                    console.log(htmlDom.style.fontSize, "htmlDom.style.fontSize");

                    console.log("移动端页面");
                    this.isPC = false
                } else {
                    //跳转pc端页面
                    console.log("pc");
                    this.isPC = true

                    // this.videoBox = "25%"
                }

            },
        },
    })


    var ccc = ["name:'abc'", "phone:17315383856", "source:0"]
</script>

</html>


版权声明：本文为SDAW_1原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。