Commit b76901e2 authored by limeimei's avatar limeimei

1

parent b388ebd5
Pipeline #1969 canceled with stages
......@@ -58,6 +58,7 @@
},
// 倒计时
decrease() {
return
// this.timer && clearInterval(this.timer);
var that = this;
that.timer = setInterval(() => {
......@@ -96,9 +97,10 @@
<style scoped>
.wrapper {
background: #F0F2F8;
height: auto;
/* height: 100%; */
box-sizing: border-box;
/* padding-bottom: 30px; */
}
.home {
......@@ -112,13 +114,13 @@
.common {
width: 100%;
height: 105px;
height: 70px;
background: #507DD9;
box-shadow: 0px 5px 9px 2px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 23px 23px;
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 15px 15px;
opacity: 1;
line-height: 105px;
padding-left: 46px;
line-height: 70px;
padding-left: 31px;
display: flex;
color: white;
align-items: center;
......@@ -130,7 +132,7 @@
margin-right: auto;
font-size:
24px;
16px;
}
......@@ -149,25 +151,26 @@
}
.hotel_content {
width: 100%;
padding: 54px;
min-height: 700px;
width: 1280px;
padding: 30px;
box-sizing: border-box;
}
.hotel_content_frame {
width: 100%;
/* height: 100%; */
/* width: 100%;
height: 100%; */
position: relative;
border-radius: 21px;
border-radius: 14px;
background: white;
z-index: 999;
}
.hotel_content_frame_countdown {
position: absolute;
top: 54px;
right: 45px;
top: 24px;
right: 30px;
z-index: 999;
}
</style>
\ No newline at end of file
......@@ -96,6 +96,7 @@
},
// 倒计时
decrease() {
return
// this.timer && clearInterval(this.timer);
var that = this;
that.timer = setInterval(() => {
......@@ -136,7 +137,7 @@
/* height: 1018px; */
box-sizing: border-box;
padding-bottom: 50px;
padding-bottom: 30px;
}
.home {
......@@ -147,16 +148,17 @@
}
.common {
width: 100%;
height: 105px;
width: 1280px;
height: 70px;
background: white;
box-shadow: 0px 5px 9px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
border-radius: 0px 0px 23px 23px;
opacity: 1;
line-height: 105px;
line-height: 70px;
display: flex;
color: #333333;
padding-left: 46px;
padding-left: 31px;
box-sizing: border-box;
display: flex;
align-items: center;
......@@ -164,7 +166,7 @@
.common_btn {
font-size: 24px;
font-size: 16px;
cursor: pointer;
}
......@@ -173,7 +175,7 @@
margin-right: 50%;
margin-left: auto;
font-size: 33px;
font-size: 22px;
}
.content_view {
......@@ -185,24 +187,25 @@
display: flex;
justify-content: center;
align-items: center;
height: 120px;
height: 80px;
width: 1280px;
}
.phone_title_item {
display: flex;
margin-right: 32px;
margin-right: 21px;
align-items: center;
}
.title_item_idx {
width: 24px;
height: 24px;
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
line-height: 24px;
font-size: 20px;
line-height: 16px;
font-size: 13px;
}
.item_active {
......@@ -216,35 +219,35 @@
.title_item {
color: #797F90;
font-size: 23px;
margin: 0 32px 0 23px;
font-size: 15px;
margin: 0 21px 0 10px;
}
.title_item_img {
width: 29px;
height: 7px;
width: 19.24px;
height: 4.37px;
}
.hotel_content {
width: 100%;
padding: 0 54px;
height: 800px;
width: 1280px;
padding: 0 30px;
box-sizing: border-box;
}
.hotel_content_frame {
width: 100%;
height: 100%;
/* width: 1280px; */
position: relative;
border-radius: 21px;
border-radius: 14px;
background: white;
z-index: 999;
}
.hotel_content_frame_countdown {
position: absolute;
top: 36px;
right: 45px;
top: 24px;
right: 30px;
z-index: 999;
}
</style>
\ No newline at end of file
......@@ -57,7 +57,8 @@
.reserved {
width: 100%;
padding: 0 45px;
/* height: 650px; */
padding: 0 30px;
/* height: calc(100vh - 150px); */
box-sizing: border-box;
......@@ -67,9 +68,9 @@
.auth_content {
width: 100%;
background: #FFFFFF;
border-radius: 21px;
height: 835px;
padding: 45px;
border-radius: 14px;
height: 800px;
padding: 30px;
box-sizing: border-box;
}
......@@ -87,14 +88,14 @@
color: #000000;
font-size: 42px;
font-size: 28px;
width: 100%;
text-align: center;
}
.auth_body {
width: 100%;
height: 90%;
/* height: 650px; */
text-align: center;
display: flex;
align-items: center;
......@@ -106,28 +107,30 @@
}
.auth_img {
width: 251px;
height: 291px;
width: 167px;
height: 194px;
}
.auth_right {
display: flex;
flex-direction: column;
margin-left: 60px;
line-height: 60px;
margin-left: 40px;
line-height: 40px;
text-align: left;
font-size: 30px;
margin-top: -30px;
margin-bottom: 62px;
font-size: 20px;
margin-top: -20px;
margin-bottom: 104px;
}
::v-deep .el-button {
width: 141px;
height: 51px;
font-size: 21px;
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
}
......@@ -135,17 +138,17 @@
position: absolute;
left: 0;
top: 0;
border-radius: 6px 6px 6px 6px;
border-radius: 4px;
border: 2px solid #707070;
border: 1px solid #707070;
}
::v-deep .el-button--primary {
width: 198px;
height: 75px;
width: 132px;
height: 50px;
background: #437AE5;
font-size: 27px;
font-size: 18px;
border: none;
}
</style>
\ No newline at end of file
......@@ -70,7 +70,7 @@
.reserved {
width: 100%;
padding: 0 45px;
padding: 0 30px;
/* height: auto; */
box-sizing: border-box;
......@@ -81,8 +81,8 @@
width: 100%;
background: #FFFFFF;
border-radius: 14px;
height: 935px;
padding: 45px;
height: 800px;
padding: 30px;
box-sizing: border-box;
}
......@@ -99,8 +99,8 @@
.auth_title_a {
font-weight: 500;
color: #000000;
font-size: 42px;
margin-bottom: 51px;
font-size: 28px;
margin-bottom: 34px;
}
.auth_title {
......@@ -108,7 +108,7 @@
color: #666666;
font-size: 27px;
font-size: 18px;
text-align: center;
}
......@@ -117,7 +117,7 @@
display: flex;
flex-direction: column;
align-items: center;
margin-top: 99px;
margin-top: 66px;
}
......@@ -126,14 +126,14 @@
}
.auth_img {
width: 580px;
height: 431px;
width: 386.54px;
height: 287.18px;
}
.auth_center_right {
display: flex;
flex-direction: column;
margin-top: 60px;
margin-top: 40px;
}
.auth_img_left {
......@@ -163,9 +163,10 @@
::v-deep .el-button {
width: 141px;
height: 51px;
font-size: 21px;
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
}
......@@ -173,17 +174,17 @@
position: absolute;
left: 0;
top: 0;
border-radius: 6px 6px 6px 6px;
border-radius: 4px;
border: 2px solid #707070;
border: 1px solid #707070;
}
::v-deep .el-button--primary {
width: 198px;
height: 75px;
width: 132px;
height: 50px;
background: #437AE5;
font-size: 27px;
font-size: 18px;
border: none;
}
</style>
\ No newline at end of file
......@@ -12,7 +12,18 @@
<img src="@/assets/sim/check.png" class="no_check" @click="chooseItem(item.value)"
v-if="currentindex==item.value">
<img src="@/assets/sim/nocheck.png" class="no_check" @click="chooseItem(item.value)" v-else>
<img :src="require('@/assets/sim/'+item.label)" class="list_item_img">
<div class="list_item_img"
:style="{'background-image': 'url('+require('@/assets/sim/'+item.label)+')'}">
<div class="item_top">{{item.title}}GB<span class="item_top_a">流量</span></div>
<div class="item_right"><span class="item_right_a">¥</span><span>{{item.price}}</span><span
class="item_right_b">/月</span></div>
<div class="item_center">本地语音通话和短信任用</div>
<div style="display: flex;align-items: center;">
<div class="item_tottom"></div>{{item.min}}分钟中国内地及香港地区漫游语音通话
</div>
</div>
<!-- <img :src="require('@/assets/sim/'+item.label)" class="list_item_img"> -->
</div>
</div>
<el-button type="primary" @click="toNext">下一步</el-button>
......@@ -28,8 +39,8 @@
data() {
return {
currentindex: null,
phoneList: [{ value: 1, label: "card1.png" }, { value: 2, label: "card2.png" }, { value: 3, label: "card3.png" },
{ value: 4, label: "card4.png" },]
phoneList: [{ value: 1, title: '40', price: "45", min: '2000', label: "card1.png" }, { title: '60', price: "55", min: '2000', value: 2, label: "card2.png" }, { title: '80', price: "65", min: '200', value: 3, label: "card3.png" },
{ title: '100', price: "75", min: '200', value: 4, label: "card4.png" },]
}
},
created() {
......@@ -54,7 +65,7 @@
position: relative;
padding: 0 54px;
padding: 0 30px;
box-sizing: border-box;
}
......@@ -62,12 +73,12 @@
.phone {
width: 100%;
min-height: 818px;
min-height: 650px;
background: #FFFFFF;
border-radius: 14px;
opacity: 1;
padding: 45px;
padding: 30px;
box-sizing: border-box;
text-align: center;
......@@ -82,16 +93,17 @@
}
.phone_first {
height: 149px;
/* height: 149px; */
display: flex;
width: 100%;
position: relative;
justify-content: center;
margin-bottom: 42px;
}
.phone_text {
font-size: 42px;
font-size: 28px;
font-weight: 500;
color: #000000;
/* margin-left: 35%; */
......@@ -112,7 +124,7 @@
.phone_list_item {
align-items: center;
margin-bottom: 90px;
margin-bottom: 60px;
/* margin: 0 100px 90px 0; */
display: flex;
......@@ -120,9 +132,59 @@
}
.list_item_img {
width: 681px;
height: 210px;
margin-left: 45px;
width: 454px;
height: 140.22px;
margin-left: 30px;
/* background: #437AE5; */
color: white;
position: relative;
;
padding: 20px;
box-sizing: border-box;
text-align: left;
background-size: 454px 140.22px;
}
.item_top_a {
font-size: 16px;
}
.item_top {
font-size: 24px;
font-weight: 500;
}
.item_right {
position: absolute;
top: 22px;
right: 22px;
color: #000000;
font-size: 24px;
}
.item_right_a {
font-size: 14px;
}
.item_right_b {
font-size: 16px;
}
.item_center {
font-size: 16px;
margin: 10px 0 18px 0;
}
.item_tottom {
width: 17px;
height: 17px;
line-height: 17px;
text-align: center;
background: #BF1E2D;
font-size: 11px;
border-radius: 50%;
margin-right: 8px;
}
::v-deep .el-button {
......@@ -132,11 +194,7 @@
font-size: 14px;
}
::v-deep .el-button {
width: 141px;
height: 51px;
font-size: 21px;
}
::v-deep .phone_first .el-button {
......@@ -144,22 +202,23 @@
left: 0;
top: 0;
border-radius: 6px 6px 6px 6px;
border-radius: 4px;
border: 2px solid #707070;
border: 1px solid #707070;
}
::v-deep .el-button--primary {
width: 198px;
height: 75px;
width: 132px;
height: 50px;
background: #437AE5;
font-size: 27px;
font-size: 18px;
}
.no_check {
width: 45px;
height: 45px;
width: 30px;
height: 30px;
}
</style>
\ No newline at end of file
......@@ -57,29 +57,29 @@
</script>
<style scoped>
.standby {
height: 100vh;
width: 100vw;
height: 800px;
width: 1280px;
background: url("~@/assets/sim/background.png") no-repeat;
background-size: 100% 100%;
background-size: 1280px 800px;
background-attachment: fixed;
position: relative;
/* background-attachment: fixed; */
}
.sim {
width: 614px;
height: 169px;
width: 426px;
height: 113px;
background: #FFFFFF;
box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.3), inset 0px 0px 21px 2px rgba(149, 136, 136, 1);
border-radius: 12px 12px 12px 12px;
opacity: 1;
box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3), inset 0px 0px 14px 1px #958888;
border-radius: 8px 8px 8px 8px;
position: absolute;
margin-left: 221px;
margin-left: 147px;
margin-top: auto;
bottom: 85px;
bottom: 143px;
display: flex;
padding: 0 50px;
padding: 0 33px;
box-sizing: border-box;
align-items: center;
cursor: pointer;
......@@ -89,13 +89,13 @@
width: 5px;
height: 50px;
background: #713DB0;
margin-left: 30px;
margin-right: 50px;
margin-left: 20px;
margin-right: 32px;
}
.sim_img {
width: 67px;
height: 96px;
width: 44.81px;
height: 64.16px;
}
......@@ -103,6 +103,6 @@
font-weight: bold;
color: #713DB0;
font-size: 51px;
font-size: 34px;
}
</style>
\ No newline at end of file
......@@ -52,9 +52,8 @@
</script>
<style scoped>
.standby {
height: 100%;
height: 800px;
width: 100%;
position: relative;
/* padding: 0 0px; */
......@@ -65,12 +64,12 @@
.phone {
width: 100%;
min-height: 827px;
min-height: 650px;
background: #FFFFFF;
border-radius: 21px;
border-radius: 14px;
opacity: 1;
padding: 45px;
padding: 30px;
box-sizing: border-box;
text-align: center;
......@@ -81,14 +80,15 @@
.phone_first {
height: 149px;
/* height: 149px; */
display: flex;
width: 100%;
margin-bottom: 41px;
}
.phone_text {
font-size: 42px;
font-size: 28px;
font-weight: 500;
color: #000000;
margin-left: 45%;
......@@ -97,27 +97,28 @@
.phone_list {
width: 1280px;
display: flex;
flex-wrap: wrap;
min-height: 471px;
/* min-height: 471px; */
align-content: flex-start;
justify-content: space-around;
/* justify-content: space-between; */
}
.phone_list_item {
width: 249px;
height: 86px;
width: 166px;
height: 56px;
background: #F0F0F0;
border-radius: 6px;
border-radius: 4px;
opacity: 1;
margin: 0 45px 38px 0;
margin: 0 31px 25px 0;
text-align: center;
font-weight: 500;
color: #666666;
font-size: 27px;
line-height: 86px;
font-size: 18px;
line-height: 56px;
cursor: pointer;
}
......
......@@ -67,14 +67,16 @@
.reserved {
width: 100%;
box-sizing: border-box;
height: 100%;
}
.card_content {
width: 100%;
height: 700px;
background: #FFFFFF;
border-radius: 21px;
padding: 45px;
border-radius: 14px;
padding: 30px;
box-sizing: border-box;
}
......@@ -95,7 +97,7 @@
.card_body {
width: 100%;
height: 810px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
......@@ -103,8 +105,8 @@
}
.card_body_text {
margin: 83px 0 45px 0;
font-size: 39px;
margin: 55px 0 30px 0;
font-size: 26px;
}
.card_center {
......@@ -112,8 +114,8 @@
}
.card_img {
width: 185px;
height: 127px;
width: 123.36px;
height: 84.72px;
}
/* ::v-deep .el-progress-bar {
......@@ -129,43 +131,37 @@
::v-deep .el-progress__text {
margin-top: 10px;
margin-left: 45%;
margin-left: 30%;
} */
.progress {
width: 827px;
width: 551px;
margin-bottom: 26px;
}
.progress_schedule {
font-size: 33px;
font-size: 22px;
color: #333333;
}
.content_time {
width: 50px;
height: 50px;
background: #FFFFFF;
opacity: 1;
border: 3px solid #5A8FF6;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
::v-deep .el-button {
width: 141px;
width: 94px;
height: 34px;
height: 51px;
font-size: 21px;
border-radius: 6px;
font-size: 14px;
border-radius: 4px;
border: 2px solid #707070;
border: 1px solid #707070;
padding: 0;
}
::v-deep .el-button--primary {
height: 50px;
width: 208px;
height: 70px;
font-size: 24px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment