|
@@ -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;
|
|
|
}
|