style:选择区域
Showing
2 changed files
with
72 additions
and
65 deletions
| ... | @@ -5,41 +5,6 @@ | ... | @@ -5,41 +5,6 @@ |
| 5 | padding-top: 25px; | 5 | padding-top: 25px; |
| 6 | margin-bottom: 25px; | 6 | margin-bottom: 25px; |
| 7 | } | 7 | } |
| 8 | .app_progress li { | ||
| 9 | padding: 0 30px; | ||
| 10 | line-height: 40px; | ||
| 11 | background: #eee; | ||
| 12 | display: inline-block; | ||
| 13 | color: #fff; | ||
| 14 | position: relative; | ||
| 15 | color: black; | ||
| 16 | cursor: pointer; | ||
| 17 | } | ||
| 18 | .app_progress li:hover { | ||
| 19 | background-color: #1E9FFF; | ||
| 20 | color: #fff; | ||
| 21 | } | ||
| 22 | |||
| 23 | .app_progress li:hover:after { | ||
| 24 | border-left-color: #1E9FFF; | ||
| 25 | } | ||
| 26 | .app_progress li:after{ | ||
| 27 | content: ''; | ||
| 28 | display: block; | ||
| 29 | border-top: 20px solid #fff; | ||
| 30 | border-bottom: 20px solid #fff; | ||
| 31 | border-left: 12px solid #eee; | ||
| 32 | position: absolute; | ||
| 33 | right:0; | ||
| 34 | top: 0; | ||
| 35 | } | ||
| 36 | .active { | ||
| 37 | background-color: #1E9FFF!important; | ||
| 38 | color: #fff!important; | ||
| 39 | } | ||
| 40 | .app_progress li.active:after { | ||
| 41 | border-left-color: #1E9FFF; | ||
| 42 | } | ||
| 43 | .selected { | 8 | .selected { |
| 44 | background-color: #5FB878!important; | 9 | background-color: #5FB878!important; |
| 45 | color: #fff!important; | 10 | color: #fff!important; |
| ... | @@ -60,6 +25,7 @@ | ... | @@ -60,6 +25,7 @@ |
| 60 | .selectCity { | 25 | .selectCity { |
| 61 | width: 1200px; | 26 | width: 1200px; |
| 62 | margin: 0 auto; | 27 | margin: 0 auto; |
| 28 | margin-top: 50px; | ||
| 63 | } | 29 | } |
| 64 | .selectCity h2 { | 30 | .selectCity h2 { |
| 65 | display: inline-block; | 31 | display: inline-block; |
| ... | @@ -67,7 +33,7 @@ | ... | @@ -67,7 +33,7 @@ |
| 67 | } | 33 | } |
| 68 | .area_list_content { | 34 | .area_list_content { |
| 69 | overflow: hidden; | 35 | overflow: hidden; |
| 70 | margin-top: 20px; | 36 | margin-top: 30px; |
| 71 | width: 100%; | 37 | width: 100%; |
| 72 | } | 38 | } |
| 73 | .area_list_content h2 { | 39 | .area_list_content h2 { |
| ... | @@ -81,22 +47,26 @@ | ... | @@ -81,22 +47,26 @@ |
| 81 | } | 47 | } |
| 82 | .selectCity .area_list li { | 48 | .selectCity .area_list li { |
| 83 | display: inline-block; | 49 | display: inline-block; |
| 84 | width: 100px; | 50 | width: 140px; |
| 85 | height: 32px; | 51 | height: 48px; |
| 86 | border-radius: 3px; | 52 | border-radius: 3px; |
| 87 | background-color: #01AAED; | 53 | margin-right: 15px; |
| 88 | margin-right: 10px; | 54 | color: #9B9B9B; |
| 89 | color: #fff; | ||
| 90 | text-align: center; | 55 | text-align: center; |
| 91 | line-height: 32px; | 56 | line-height: 48px; |
| 92 | margin-bottom: 10px; | 57 | margin-bottom: 15px; |
| 93 | cursor: pointer; | 58 | cursor: pointer; |
| 59 | background: #FFFFFF; | ||
| 60 | border-radius: 4px; | ||
| 61 | border: 1px solid #DEDEDE; | ||
| 94 | } | 62 | } |
| 95 | .selectCity .area_list li:hover { | 63 | .selectCity .area_list li:hover { |
| 96 | background-color: #5FB878; | 64 | border-color: #0091FF; |
| 65 | color: #0091FF; | ||
| 97 | } | 66 | } |
| 98 | .active1 { | 67 | .active1 { |
| 99 | background-color: #5FB878!important; | 68 | border-color: #0091FF!important; |
| 69 | color: #0091FF!important; | ||
| 100 | } | 70 | } |
| 101 | .select_officehall { | 71 | .select_officehall { |
| 102 | width: 1200px; | 72 | width: 1200px; |
| ... | @@ -109,7 +79,7 @@ | ... | @@ -109,7 +79,7 @@ |
| 109 | } | 79 | } |
| 110 | /* -----------------------------地图--------------------------------------- */ | 80 | /* -----------------------------地图--------------------------------------- */ |
| 111 | .map_content { | 81 | .map_content { |
| 112 | margin-top: 20px; | 82 | margin-top: 20px!important; |
| 113 | } | 83 | } |
| 114 | .office_halls { | 84 | .office_halls { |
| 115 | width: 15%; | 85 | width: 15%; |
| ... | @@ -118,26 +88,48 @@ | ... | @@ -118,26 +88,48 @@ |
| 118 | } | 88 | } |
| 119 | .office_halls h2 { | 89 | .office_halls h2 { |
| 120 | font-weight: 600; | 90 | font-weight: 600; |
| 121 | margin-bottom: 6px; | 91 | margin-bottom: 15px; |
| 92 | color: #6D7278; | ||
| 93 | line-height: 16px; | ||
| 122 | } | 94 | } |
| 123 | .office_halls li{ | 95 | .office_halls li{ |
| 124 | line-height: 28px; | 96 | width: 150px; |
| 97 | height: 48px; | ||
| 98 | background: #FFFFFF; | ||
| 99 | border-radius: 4px; | ||
| 100 | border: 1px solid #DEDEDE; | ||
| 125 | cursor: pointer; | 101 | cursor: pointer; |
| 102 | text-align: center; | ||
| 103 | line-height: 48px; | ||
| 104 | margin-bottom: 10px; | ||
| 105 | color: #9B9B9B; | ||
| 126 | } | 106 | } |
| 127 | .office_halls li:hover { | 107 | .office_halls li:hover { |
| 128 | color: #0091FF; | 108 | color: #006CFF; |
| 109 | border-color: #006CFF; | ||
| 129 | } | 110 | } |
| 130 | .footer_button { | 111 | .footer_button { |
| 131 | margin: 20px 0; | 112 | margin: 30px 0 100px 0; |
| 132 | text-align: center; | 113 | text-align: center; |
| 133 | } | 114 | } |
| 134 | .footer_button button { | 115 | .footer_button button { |
| 135 | margin-right: 10px; | 116 | margin-right: 10px; |
| 117 | width: 140px; | ||
| 118 | height: 42px; | ||
| 119 | position: relative; | ||
| 136 | } | 120 | } |
| 137 | .footer_button a { | 121 | .footer_button a { |
| 138 | color: #fff; | 122 | color: #fff; |
| 123 | display: block; | ||
| 124 | width: 140px; | ||
| 125 | height: 42px; | ||
| 126 | position: absolute; | ||
| 127 | left: 0; | ||
| 128 | top: 0; | ||
| 129 | } | ||
| 130 | .footer_button a:hover { | ||
| 131 | color: #fff; | ||
| 139 | } | 132 | } |
| 140 | |||
| 141 | .hallActive { | 133 | .hallActive { |
| 142 | background-color: rgb(236, 236, 236); | 134 | background-color: rgb(236, 236, 236); |
| 143 | color: #0091FF; | 135 | color: #0091FF; | ... | ... |
| ... | @@ -8,6 +8,7 @@ | ... | @@ -8,6 +8,7 @@ |
| 8 | <title>我的预约-选择区域</title> | 8 | <title>我的预约-选择区域</title> |
| 9 | <script type="text/javascript" src="../staticJs/head.js"></script> | 9 | <script type="text/javascript" src="../staticJs/head.js"></script> |
| 10 | <link rel="stylesheet" type="text/css" href="../staticCss/xzqy.css"> | 10 | <link rel="stylesheet" type="text/css" href="../staticCss/xzqy.css"> |
| 11 | <link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css"> | ||
| 11 | </head> | 12 | </head> |
| 12 | 13 | ||
| 13 | <body> | 14 | <body> |
| ... | @@ -22,26 +23,40 @@ | ... | @@ -22,26 +23,40 @@ |
| 22 | </div> | 23 | </div> |
| 23 | </div> | 24 | </div> |
| 24 | <!-- ----------------------------------内容模块的开始----------------------------------------------- --> | 25 | <!-- ----------------------------------内容模块的开始----------------------------------------------- --> |
| 25 | <div class="appointment_notice contentBox"> | 26 | <div class="progressBar contentBox"> |
| 26 | <ul class="app_progress"> | 27 | <ul class="app_progress"> |
| 27 | <li class="selected"> | 28 | <li> |
| 28 | <span>1</span> | 29 | <p class="active"></p> |
| 29 | 预约须知 | 30 | <h5> |
| 31 | 预约须知 | ||
| 32 | </h5> | ||
| 30 | </li> | 33 | </li> |
| 31 | <div class="line"></div> | 34 | <div class="layui-progress"> |
| 32 | <li class="active"> | 35 | <div class="layui-progress-bar" lay-percent="100%"></div> |
| 33 | <span>2</span> | 36 | </div> |
| 34 | 选择区域 | 37 | <li> |
| 38 | <p class="active"></p> | ||
| 39 | <h5> | ||
| 40 | 选择区域 | ||
| 41 | </h5> | ||
| 35 | </li> | 42 | </li> |
| 36 | <div class="line"></div> | 43 | <div class="layui-progress"> |
| 44 | <div class="layui-progress-bar" lay-percent="50%"></div> | ||
| 45 | </div> | ||
| 37 | <li> | 46 | <li> |
| 38 | <span>3</span> | 47 | <p></p> |
| 39 | 预约时间 | 48 | <h5> |
| 49 | 预约时间 | ||
| 50 | </h5> | ||
| 40 | </li> | 51 | </li> |
| 41 | <div class="line"></div> | 52 | <div class="layui-progress"> |
| 53 | <div class="layui-progress-bar"></div> | ||
| 54 | </div> | ||
| 42 | <li> | 55 | <li> |
| 43 | <span>4</span> | 56 | <p></p> |
| 44 | 预约结果 | 57 | <h5> |
| 58 | 预约结果 | ||
| 59 | </h5> | ||
| 45 | </li> | 60 | </li> |
| 46 | </ul> | 61 | </ul> |
| 47 | </div> | 62 | </div> | ... | ... |
-
Please register or sign in to post a comment