轮播图优化2.0

src/app/tab1/tab1.page.html

@@ -6,7 +6,7 @@
 </ion-header>
 
 <ion-content class="home">
-  
+
   <!-- 轮播图部分 -->
   <div class="carousel_map">
     <div class="slide">
@@ -27,27 +27,27 @@
       <ul class="list">
         <li class="item">
           <a href="###">
-            <img src="assets/img/slide1.png" style="height: 100%; width: 100%;"/>
+            <img src="assets/img/slide1.png" style="height: 50%; width: 100%;"/>
           </a>
         </li>
         <li class="item">
           <a href="###">
-            <img src="assets/img/slide2.png" style="height: 100%; width: 100%;"/>
+            <img src="assets/img/slide2.png" style="height: 50%; width: 100%;"/>
           </a>
         </li>
         <li class="item">
           <a href="###">
-            <img src="assets/img/slide3.png" style="height: 100%; width: 100%;"/>
+            <img src="assets/img/slide3.png" style="height: 50%; width: 100%;"/>
           </a>
         </li>
         <li class="item">
           <a href="###">
-            <img src="assets/img/slide3.png" style="height: 100%; width: 100%;"/>
+            <img src="assets/img/slide3.png" style="height: 50%; width: 100%;"/>
           </a>
         </li>
         <li class="item">
           <a href="###">
-            <img src="assets/img/slide1.png" style="height: 100%; width: 100%;"/>
+            <img src="assets/img/slide1.png" style="height: 50%; width: 100%;"/>
           </a>
         </li>
       </ul>

src/app/tab1/tab1.page.scss

@@ -30,8 +30,8 @@
 }
 
 .carousel_map {
-	width: 640px;
-	height: 400px;
+	width: 414px; //界面适配
+	height: 240px;
 }
 
 .slide {
@@ -69,8 +69,8 @@
 	width: 1rem;
 	height: 1rem;
 	border-radius: 50%;
-	margin: 0 0.3rem;
-	border: 0.1rem solid #fff;
+	margin: 0.5rem;
+	border: 0.2rem solid #ba9327;
 	background-color: transparent;
 	box-sizing: border-box;
 	cursor: pointer;
@@ -81,29 +81,29 @@ input[id=pic1]:checked ~ .labels label[for=pic1],
 input[id=pic2]:checked ~ .labels label[for=pic2],
 input[id=pic3]:checked ~ .labels label[for=pic3],
 input[id=pic4]:checked ~ .labels label[for=pic4] {
-	background-color: #fff;
+	background-color: #755d1b;
 	border: 0.1rem solid #fff;
 }
 /* 按钮控件选择图片 */
 input[id=pic1]:checked ~ .list {
-	transform: translate(calc(0 * 640px));
+	transform: translate(calc(0 * 414px));
 }
 input[id=pic2]:checked ~ .list {
-	transform: translate(calc(-1 * 640px));
+	transform: translate(calc(-1 * 414px));
 }	
 input[id=pic3]:checked ~ .list {
-	transform: translate(calc(-2 * 640px));
+	transform: translate(calc(-2 * 414px));
 }
 input[id=pic4]:checked ~ .list {
-	transform: translate(calc(-3 * 640px));
+	transform: translate(calc(-3 * 414px));
 }
 
 ul {
-	list-style: none;
+	list-style: none;// 样式
 }
 
 .list {
-	width: calc(5 * 640px);
+	width: calc(5 * 414px);// 界面可容纳像素
 	height: inherit;
 	position: relative;
 	
@@ -114,24 +114,24 @@ ul {
 /* 动画关键帧轮播 */
 @keyframes move {
 	0% {
-		transform: translate(calc(0 * 640px));
+		transform: translate(calc(0 * 414px));
 	}
 	25% {
-		transform: translate(calc(-1 * 640px));
+		transform: translate(calc(-1 * 414px));
 	}
 	50% {
-		transform: translate(calc(-2 * 640px));
+		transform: translate(calc(-2 * 414px));
 	}
 	75% {
-		transform: translate(calc(-3 * 640px));
+		transform: translate(calc(-3 * 414px));
 	}
 	100% {
-		transform: translate(calc(-4 * 640px));
+		transform: translate(calc(-4 * 414px));
 	}
 }
 
 .item {
-	width: 640px;
+	width: 414px;
 	height: 400px;
 	float: left;
 }