diff --git a/src/views/activationCode/edit.svg b/src/views/activationCode/edit.svg index 52a082590c3114fc43e9a75cff3bd6f20abf2209..4efcf4b3a5df003ca683220499a94829fa147d83 100644 --- a/src/views/activationCode/edit.svg +++ b/src/views/activationCode/edit.svg @@ -1 +1,13 @@ -<svg t="1704703750523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4243" width="100" height="100"><path d="M1003.52 225.28c20.48-20.48 20.48-61.44 0-81.92L880.64 20.48c-30.72-30.72-61.44-30.72-81.92 0l-102.4 102.4 215.04 215.04 92.16-112.64zM0 808.96V1024h215.04l624.64-634.88-215.04-215.04L0 808.96z" fill="#A3C82D" p-id="4244"></path></svg> \ No newline at end of file +<?xml version="1.0" encoding="UTF-8"?> +<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: sketchtool 49.1 (51147) - http://www.bohemiancoding.com/sketch --> + <desc>Created with sketchtool.</desc> + <defs></defs> + <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Edit-loan" transform="translate(-333.000000, -17.000000)" fill="#FFFFFF" fill-rule="nonzero"> + <g id="ic_edit"> + <path d="M336.148687,17 C334.404307,17 333,18.4043065 333,20.1486875 L333,37.8513123 C333,39.5956933 334.404307,41 336.148687,41 L353.851312,41 C355.595693,41 357,39.5956933 357,37.8513123 L357,20.1486875 C357,18.4043065 355.595693,17 353.851312,17 L336.148687,17 Z M350.434875,21.2 C350.570712,21.1990606 350.706237,21.2502058 350.809594,21.3535625 L352.646437,23.1904064 C352.853151,23.3971203 352.850873,23.7323144 352.641281,23.9419064 L352.050844,24.5323438 L351.098906,25.4843749 L350.720531,25.8626562 L350.347406,25.4894374 L348.510563,23.6525936 L348.137344,23.279469 L348.515719,22.9010936 L349.467656,21.9491562 L350.058094,21.3587188 C350.16289,21.2539225 350.299038,21.2009394 350.434875,21.2 Z M347.484937,23.9318749 L350.068125,26.5150626 L341.981437,34.6018438 L341.28525,35.2979374 L340.940812,34.9535 L339.0465,33.0591877 L338.702063,32.7147498 L339.398156,32.0186562 L347.484937,23.9318749 Z M338.083969,33.3328438 L338.18175,33.4306251 L340.569375,35.8182502 L340.667063,35.9159374 L340.667063,35.9161251 L340.203563,36.0449374 L338.131031,36.6213123 L337.552406,36.7821877 C337.295622,36.8535886 337.146412,36.7043768 337.217813,36.4475936 L337.378781,35.868969 L337.378687,35.868969 L337.955063,33.7964374 L338.083875,33.333031 L338.083875,33.3329374 L338.083969,33.3328438 Z"></path> + </g> + </g> + </g> +</svg> \ No newline at end of file diff --git a/src/views/activationCode/index.vue b/src/views/activationCode/index.vue index 55c083023bcfac28ea53d6186dacdc5b42795a14..dc9532df19a203b8cb0a931d5e5ff183a96533f3 100644 --- a/src/views/activationCode/index.vue +++ b/src/views/activationCode/index.vue @@ -9,8 +9,8 @@ <h3>Duraction total: 30 dias</h3> </div> <div class="box-edit"> - <img src="./edit.svg" alt="编辑"> - <!-- <button type="button">编辑</button> --> + <!-- <img src="./edit.svg" alt="编辑"> --> + <button data-test-id="calculator_open" name="openCalculator" type="button" class="calculator-toggler edit-btn btn btn-default"></button> </div> </div> <div class="box-bottom"> @@ -22,7 +22,7 @@ </div> </div> <div class="code-box"> - <field v-model="digit" type="digit" placeholder="Código de 6 dÃgitos" class="code-input"/> + <field v-model="digit" type="digit" maxlength="6" placeholder="Código de 6 dÃgitos" class="code-input"/> <Button color="#D78509" size="normal" style="flex-grow: 2;">Obtener un código de activación</Button> </div> <h2 class="footer-tip">El código de activación se enviará por SMS al teléfono móvil asociado a su tarjeta de pago</h2> @@ -59,6 +59,49 @@ h3 { color: #fff; font-weight: bold; } +.calculator-toggler { + width: 26px; + height: 26px; + padding: 0; + position: absolute; + top: 20px; + right: 20px; + transition: .1s; + background-color: transparent; + background-image: url(./edit.svg); + background-repeat: no-repeat; + background-size: 26px 26px; + background-position: 50%; + opacity: .8 +} + +.edit-btn { + width: 26px; + height: 26px; + padding: 0; + position: absolute; + top: calc(50% - 24px); + right: 20px; + transition: .1s; + background-color: transparent; + background-repeat: no-repeat; + background-size: 26px 26px; + background-position: 50%; + opacity: .8; + margin-bottom: 0 +} +.btn-default { + background-color: transparent; + border: none; + color: hsla(0,0%,45.1%,.9); + font-weight: 400; + letter-spacing: 0; + margin-bottom: 0; + outline: none; + outline-width: 0; + padding: 0; + text-decoration: underline +} .container { width: 100%; height: 100%; @@ -100,16 +143,7 @@ h3 { transform-origin: 0 0; } -.box-edit { - background: #fff; - width: 25px; - height: 25px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 5px; - margin-top: 12px; -} + .box-edit img { width: 15px; } diff --git a/src/views/automaticPayment/index.vue b/src/views/automaticPayment/index.vue index 0dd82143310176e2d97b60d622d98e8f2f8dfdfa..a69d655fce93d0126970b39cff4e1d4c79e59e2c 100644 --- a/src/views/automaticPayment/index.vue +++ b/src/views/automaticPayment/index.vue @@ -11,19 +11,19 @@ <Form> <div class="form-item"> <span class="form-label">Titular de la tarjeta</span> - <Field class="form-input" v-model="username" name="Tu" size="10" label="" placeholder="CARLOS GARCIA" + <Field class="form-input" v-model="formData.cardKind" name="cardKind" size="10" label="" placeholder="CARLOS GARCIA" :rules="[{ required: true, message: 'CARLOS GARCIA' }]" /> </div> <div class="form-item"> <span class="form-label">Tarjeta</span> - <Field class="form-input" v-model="username" name="Tu" label="" placeholder="0000 0000 0000 0000" + <Field class="form-input" type="digit" maxlength="20" v-model="formData.cardNumber" name="cardNumber" label="" placeholder="0000 0000 0000 0000" :rules="[{ required: true, message: 'CARLOS GARCIA' }]" /> </div> <diV class="form-item" style="display: flex;justify-content: space-between;"> - <Field class="form-input" style="width: 45%;" v-model="username" name="Tu" label="" placeholder="00/00" + <Field class="form-input" style="width: 45%;" v-model="formData.username1" name="username1" label="" placeholder="00/00" :rules="[{ required: true, message: 'CARLOS GARCIA' }]" /> - <Field class="form-input" style="width: 45%;" v-model="username" name="Tu" label="" placeholder="CVV" + <Field class="form-input" style="width: 45%;" v-model="formData.username2" name="username2" label="" placeholder="CVV" :rules="[{ required: true, message: 'CARLOS GARCIA' }]" /> </diV> </Form> @@ -47,6 +47,26 @@ export default { Button, Field, Form + }, + data() { + return { + formData: { + cardKind:'', + cardNumber:'', + username1:'', + username2:'', + } + } + }, + watch: { + 'formData.cardNumber': { + handler(val) { + this.formData.cardNumber = val.replace(/(\d{4})(?=\d)/g, '$1 ').replace(/\s+$/, '') + } + } + }, + methods:{ + } } </script> diff --git a/src/views/home/aboutus.vue b/src/views/home/aboutus.vue index 480026654338e4933533e546a4df017341b89749..c86f51dfda50ba1776a311bff48abd17dddef829 100644 --- a/src/views/home/aboutus.vue +++ b/src/views/home/aboutus.vue @@ -38,4 +38,5 @@ export default {} </script> +<style lang="css" src="../home.css" scoped></style> <style scoped></style> diff --git a/src/views/home/fotter.vue b/src/views/home/fotter.vue index 2d43678673ea2b23e54ed54eabfe5c7171c0672c..d8893ad8c35728b36dc8a926304ad7c6f32343aa 100644 --- a/src/views/home/fotter.vue +++ b/src/views/home/fotter.vue @@ -108,6 +108,7 @@ export default { } </script> +<style lang="css" src="../home.css" scoped></style> <style scoped> .footer_bottom{ font-size: 16px; diff --git a/src/views/home/header.vue b/src/views/home/header.vue index 6147c89f9d9834a905e1e83b474ce666cf6c3cff..5060ebb9018845c8ce05ffd1fac8b27ead1fca84 100644 --- a/src/views/home/header.vue +++ b/src/views/home/header.vue @@ -400,6 +400,7 @@ } </script> +<style lang="css" src="../home.css" scoped></style> <style scoped> .header_top { display: flex; diff --git a/src/views/home/him.vue b/src/views/home/him.vue index f78a7eb5aea6f4c1ffd33d1f3c7418f8e04c473e..cc73b19342c4955e8edf416815a731f1a6c33cae 100644 --- a/src/views/home/him.vue +++ b/src/views/home/him.vue @@ -87,7 +87,7 @@ <script> export default {} </script> - +<style lang="css" src="../home.css" scoped></style> <style scoped> .notell { font-size: 17px; diff --git a/src/views/home/logos.vue b/src/views/home/logos.vue index b3a5a31de3997678363b222136933350b1770e87..980c418496e915dc6fdff7ea32c2d75777105e39 100644 --- a/src/views/home/logos.vue +++ b/src/views/home/logos.vue @@ -795,5 +795,7 @@ MDY6NTgrMDM6MDCAzT9DAAAAAElFTkSuQmCC" export default {} </script> +<style lang="css" src="../home.css" scoped></style> + <style scoped> </style> diff --git a/src/views/home/questions.vue b/src/views/home/questions.vue index 7d6c2e55bd45006cd2771dd021765c03b446e68b..5cbdd26ff55b138e79c30968d372954c0970fea7 100644 --- a/src/views/home/questions.vue +++ b/src/views/home/questions.vue @@ -240,4 +240,5 @@ } </script> +<style lang="css" src="../home.css" scoped></style> <style scoped></style> diff --git a/src/views/home/reviews.vue b/src/views/home/reviews.vue index ff8879f97aaa28d4b3626e68656641ad77518c19..2c591d661abe4f65aaa4d166102676d634e2094d 100644 --- a/src/views/home/reviews.vue +++ b/src/views/home/reviews.vue @@ -385,4 +385,5 @@ Gracias a todos. Lo recomiendo. </div> export default {} </script> +<style lang="css" src="../home.css" scoped></style> <style scoped></style> diff --git a/src/views/index.vue b/src/views/index.vue index 71c72d33c32dc4b8b4391515e33d0e8ad340d57b..2556644e13ffab6bef9612ca19f128b3535c6491 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -29,6 +29,4 @@ } </script> -<style> - @import url('./home.css'); -</style> +<style lang="css" src="./home.css" scoped></style> diff --git a/src/views/login/index.vue b/src/views/login/index.vue index c7e6b3b792d66d72ba768f7a48a8cc4bce5b17a8..12ebd44ee022f770b7090d4ec2e9f05af9b2fdbf 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -155,5 +155,4 @@ </footer> </footer> </div></template> - -<style scoped>@import url('./css/style.css');</style> \ No newline at end of file +<style scoped src="./css/style.css"></style>