login.vue 22 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013
  1. <template>
  2. <view class="container">
  3. <image class="login-bg" src="../../static/images/login-bg.png"></image>
  4. <view class="login-content">
  5. <view class="page-title flex-center">{{login_name}} </view>
  6. <view class="login-content-home">
  7. <view class="login-content-home-wd100">
  8. <view class="bg-img1">
  9. </view>
  10. </view>
  11. <view class="login-content-home-wd100 login-content-home2">
  12. <view class="bg-img2">
  13. </view>
  14. </view>
  15. <view class="login-content-home-wd100 login-content-home3">
  16. <view class="bg-img3">
  17. </view>
  18. </view>
  19. <view class="cell-home">
  20. <view class="cell-home-content">
  21. <view class="cell-home-title-text flex-y-bottom">
  22. <view @click="Verifier(item.number)" :class="is_login==item.number?'cell-home-title':''"
  23. v-for="(item,index) of loginArr" :key="index">
  24. {{item.name}}
  25. </view>
  26. </view>
  27. <form @submit="login" v-if="is_login==1">
  28. <view class="cell flex-row-between">
  29. <input name="tel" @input="getphone" :value="phone" placeholder="请输入登录账号"></input>
  30. <i class="iconfont iconquchu flex-center" @click="onClearPhone" v-show="phone"></i>
  31. </view>
  32. <view class="cell flex-row-between" v-if="is_pwd">
  33. <input :password="is_password" type="text" name="pwd" maxlength="16"
  34. placeholder="请输入密码"></input>
  35. <image v-if="isLook" @click="bindLook" class="islook"
  36. src="../../static/images/isLook.png">
  37. </image>
  38. <image v-else @click="bindLook" class="islooks" src="../../static/images/hide_Look.png">
  39. </image>
  40. </view>
  41. <view class="cell flex-row-between" v-else>
  42. <input type="number" name="code" :value="pwd" maxlength="6"
  43. placeholder="请输入验证码"></input>
  44. <view class="code-btn" @click="getCode">
  45. {{codeConfig.type == 1?'获取验证码':'重试('+codeConfig.time+'s)'}}
  46. </view>
  47. </view>
  48. <view class="xieyi flex-row" @click="changeXieyi">
  49. <image src="../../static/images/select_on.png" mode="aspectFit" class="icon"
  50. v-if="xieyiActive">
  51. </image>
  52. <image src="../../static/images/select.png" mode="aspectFit" class="icon" v-else>
  53. </image>
  54. <view class="xieyi-text">登录即代表你已阅读并同意</view>
  55. <view @click.stop="agreement" style="color: #007AFF;">《用户服务协议》</view>
  56. </view>
  57. <!-- <button form-type="submit" class="login-btn">登录</button> -->
  58. <button hover-class="none" class="login-btn flex-center" form-type="submit"
  59. :class="toggleDelay?'shake_animation':''">
  60. <image src="../../static/images/login-btn.png" mode=""
  61. style=" width: 180rpx;height: 180rpx;margin-top: 30rpx;"></image>
  62. </button>
  63. <view class="login-text" @click="bindpwd">
  64. {{is_pwd?'验证码登录':'密码登录'}}
  65. </view>
  66. <!-- #ifdef MP-WEIXIN-->
  67. <button open-type="getUserInfo" @getuserinfo='mylogin' hover-class="none"
  68. class="wxlogin flex-center">
  69. <image src="../../static/images/wxlogin.png" mode=""></image>
  70. </button>
  71. <!-- #endif -->
  72. <!-- #ifdef H5 -->
  73. <button @click="gzhurl" hover-class="none" class="wxlogin flex-center">
  74. <image src="../../static/images/wxlogin.png" mode=""></image>
  75. </button>
  76. <!-- #endif -->
  77. </form>
  78. <form @submit="login3" v-if="is_login==2">
  79. <view class="cell flex-row-between">
  80. <input name="name" @input="getphone" :value="phone" placeholder="请输入登录账号"></input>
  81. <i class="iconfont iconquchu flex-center" @click="onClearPhone" v-show="phone"></i>
  82. </view>
  83. <view class="cell flex-row-between">
  84. <input :password="is_password" type="text" name="password" maxlength="16"
  85. placeholder="请输入密码"></input>
  86. <image v-if="isLook" @click="bindLook" class="islook"
  87. src="../../static/images/isLook.png">
  88. </image>
  89. <image v-else @click="bindLook" class="islooks" src="../../static/images/hide_Look.png">
  90. </image>
  91. </view>
  92. <button hover-class="none" class="login-btn" form-type="submit"
  93. :class="toggleDelay?'shake_animation':''">
  94. <image src="../../static/images/login-btn.png" mode=""></image>
  95. </button>
  96. </form>
  97. <form @submit="login3" v-if="is_login==3">
  98. <view class="cell flex-row-between">
  99. <input name="name" @input="getphone" :value="phone" placeholder="请输入登录账号"></input>
  100. <i class="iconfont iconquchu flex-center" @click="onClearPhone" v-show="phone"></i>
  101. </view>
  102. <view class="cell flex-row-between">
  103. <input :password="is_password" type="text" name="password" maxlength="16"
  104. placeholder="请输入密码"></input>
  105. <image v-if="isLook" @click="bindLook" class="islook"
  106. src="../../static/images/isLook.png">
  107. </image>
  108. <image v-else @click="bindLook" class="islooks" src="../../static/images/hide_Look.png">
  109. </image>
  110. </view>
  111. <button hover-class="none" class="login-btn" form-type="submit"
  112. :class="toggleDelay?'shake_animation':''">
  113. <image src="../../static/images/login-btn.png" mode=""></image>
  114. </button>
  115. <!-- <button form-type="submit" class="login-btn">登录</button> -->
  116. </form>
  117. </view>
  118. </view>
  119. </view>
  120. </view>
  121. <view class="model_notice flex-center" v-if="is_text">
  122. <view class="model_notice_content">
  123. <view class="bgf model_notice_title ft32">
  124. <image src="../../static/images/Privacy.png"></image>
  125. </view>
  126. <view class="model_notice_color">
  127. <scroll-view scroll-y style="min-height: 500rpx;height: 500rpx;" scroll-y="true">
  128. <rich-text :nodes="nodes">
  129. </rich-text>
  130. </scroll-view>
  131. </view>
  132. <view class="box-pack-between ft32 " style="padding: 38rpx 40rpx;">
  133. <navigator class="guanbis flex-center" hover-class="none" target="miniProgram" open-type="exit">
  134. 拒绝
  135. </navigator>
  136. <view class="confirm flex-center" @click="bindconfirm">
  137. 同意并继续
  138. </view>
  139. </view>
  140. </view>
  141. </view>
  142. </view>
  143. </template>
  144. <script>
  145. export default {
  146. data() {
  147. return {
  148. toggleDelay: false,
  149. phone: null,
  150. code: null,
  151. xieyiActive: true,
  152. codeConfig: {
  153. type: 1,
  154. time: 60
  155. },
  156. tel: '',
  157. pwd: '',
  158. is_pwd: false,
  159. login_name: "",
  160. isLook: false,
  161. is_password: true,
  162. loginArr: [{
  163. name: "用户登录",
  164. number: 1
  165. }, {
  166. name: "商家登录",
  167. number: 2
  168. }, {
  169. name: "门店登录",
  170. number: 3
  171. }, ],
  172. is_login: 1,
  173. is_text: false,
  174. nodes:'',
  175. }
  176. },
  177. onLoad(e) {
  178. // #ifdef H5
  179. this.isweb();
  180. // #endif
  181. // this.xieyi();
  182. if (!uni.getStorageSync("agree_user")) {
  183. this.Privacyadvance();
  184. }
  185. },
  186. onShow() {
  187. this._getStorage();
  188. this.getname();
  189. },
  190. onShareAppMessage(e) {
  191. },
  192. methods: {
  193. bindconfirm() {
  194. this.is_text = false;
  195. uni.setStorageSync("agree_user", true)
  196. },
  197. Privacyadvance() {
  198. this.request({
  199. url: "user/yixie",
  200. data: {
  201. kc_id: "",
  202. },
  203. }).then(res => {
  204. console.log(res, "res")
  205. if (res.code === '200') {
  206. this.is_text = true;
  207. this.nodes = res.data.kc_text.replace('<img',
  208. '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')
  209. }
  210. });
  211. },
  212. _getStorage() {
  213. uni.getStorage({
  214. key: this.is_login + 'login',
  215. success: (res) => {
  216. this.phone = res.data.tel;
  217. },
  218. fail: (err) => {
  219. this.phone = "";
  220. }
  221. });
  222. },
  223. Verifier(e) {
  224. console.log(e, "e")
  225. this.is_login = e;
  226. this._getStorage();
  227. },
  228. bindLook(e) {
  229. this.isLook = !this.isLook;
  230. this.is_password = !this.is_password;
  231. },
  232. getname() {
  233. this.request({
  234. url: "index/login_name",
  235. }).then(res => {
  236. console.log(res, "res")
  237. if (res.code == "200") {
  238. this.login_name = res.data.login_name;
  239. }
  240. }).catch((res) => {
  241. console.log("message", res)
  242. });
  243. },
  244. // 公众号授权
  245. isweb() {
  246. function GetRequest() {
  247. var url = location.search; //获取url中"?"符后的字串
  248. var theRequest = new Object();
  249. if (url.indexOf("?") != -1) {
  250. //判断是否有参数
  251. var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
  252. var strs = str.split("&");
  253. console.log(strs)
  254. for (var i = 0; i < strs.length; i++) {
  255. theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  256. }
  257. }
  258. return theRequest;
  259. }
  260. if (GetRequest().code) {
  261. //发起网络请求
  262. this.request({
  263. url: "user/gzh_login",
  264. data: {
  265. code: GetRequest().code,
  266. },
  267. }).then(res => {
  268. console.log(res, "res")
  269. uni.setStorageSync("token", res.data.token);
  270. setTimeout(() => {
  271. uni.reLaunch({
  272. url: "../index/index"
  273. })
  274. }, 500)
  275. }).catch((res) => {
  276. console.log("message", res)
  277. if (res.message == "获取openid失败") {
  278. return
  279. }
  280. uni.showToast({
  281. title: res.message,
  282. icon: 'none'
  283. })
  284. });
  285. }
  286. },
  287. gzhurl(e) {
  288. this.request({
  289. url: "user/gzhurl",
  290. data: {
  291. type: 1,
  292. },
  293. }).then(res => {
  294. if (res.data.url) {
  295. window.location.href = res.data.url
  296. }
  297. }).catch((res) => {
  298. console.log("message", res)
  299. });
  300. },
  301. // 微信授权
  302. mylogin(e) {
  303. if (e.detail.errMsg == "getUserInfo:ok") {
  304. uni.login({
  305. success: (res) => {
  306. console.log(res)
  307. let code = res.code;
  308. if (code) {
  309. //发起网络请求
  310. this.request({
  311. url: "user/wx_login",
  312. data: {
  313. code: code,
  314. },
  315. }).then(res => {
  316. console.log(res, "res")
  317. uni.setStorageSync("token", res.data.token);
  318. setTimeout(() => {
  319. uni.reLaunch({
  320. url: "../index/index"
  321. })
  322. }, 500)
  323. }).catch((res) => {
  324. console.log("message", res)
  325. uni.showModal({
  326. title: '提示',
  327. content: res.message,
  328. success: (res) => {
  329. if (res.confirm) {
  330. uni.navigateTo({
  331. url: "./bindphone?code=" +
  332. code + '&type=1'
  333. })
  334. } else if (res.cancel) {
  335. console.log('用户点击取消');
  336. }
  337. }
  338. })
  339. });
  340. } else {
  341. console.log('登录失败!' + res.errMsg)
  342. }
  343. }
  344. })
  345. } else {
  346. uni.showToast({
  347. title: '请允许授权',
  348. icon: 'none',
  349. })
  350. }
  351. },
  352. bindpwd() {
  353. this.is_pwd = !this.is_pwd;
  354. },
  355. agreement(e) {
  356. uni.navigateTo({
  357. url: "../text/text?title=注册服务协议"
  358. })
  359. },
  360. getphone(e) {
  361. this.phone = e.detail.value;
  362. },
  363. onClearPhone() {
  364. this.tel = "";
  365. this.phone = "";
  366. },
  367. changeXieyi() {
  368. this.xieyiActive = true
  369. },
  370. getCode() {
  371. if (this.codeConfig.type == 2) {
  372. return false
  373. }
  374. if (!/^1[0-9]{10}/.test(this.phone)) {
  375. uni.showToast({
  376. title: "请正确输入手机号",
  377. icon: 'none'
  378. })
  379. return false
  380. }
  381. //请求验证码
  382. this.request({
  383. url: "user/sendcode",
  384. data: {
  385. tel: this.phone,
  386. },
  387. }).then(res => {
  388. console.log(res, "res")
  389. if (res.code === '200') {
  390. this.codeConfig.type = 2
  391. this._timer = setInterval(() => {
  392. if (this.codeConfig.time == 1) {
  393. this.codeConfig = {
  394. type: 1,
  395. time: 30
  396. }
  397. clearInterval(this._timer)
  398. }
  399. this.codeConfig.time--
  400. }, 1000)
  401. }
  402. }).catch((res) => {
  403. console.log("message", res)
  404. uni.showToast({
  405. title: res.message,
  406. icon: 'none'
  407. })
  408. });
  409. },
  410. login(e) {
  411. let data, url;
  412. // if (!/^1[0-9]{10}/.test(e.detail.value.tel)) {
  413. // uni.showToast({
  414. // title: "请正确输入手机号",
  415. // icon: 'none'
  416. // })
  417. // this.toggleDelay = true;
  418. // setTimeout(() => {
  419. // this.toggleDelay = false;
  420. // }, 1000)
  421. // return false
  422. // }
  423. if (!this.xieyiActive) {
  424. uni.showToast({
  425. title: "请同意注册协议",
  426. icon: 'none'
  427. })
  428. return false
  429. }
  430. if (this.is_pwd) {
  431. if (!e.detail.value.pwd) {
  432. uni.showToast({
  433. title: "请输入密码",
  434. icon: 'none'
  435. })
  436. return false
  437. }
  438. data = {
  439. tel: e.detail.value.tel,
  440. pwd: e.detail.value.pwd,
  441. }
  442. url = "user/pass_login";
  443. } else {
  444. if (e.detail.value.code === '' || e.detail.value.code === null) {
  445. uni.showToast({
  446. title: "请输入验证码",
  447. icon: 'none'
  448. })
  449. return false
  450. }
  451. data = {
  452. tel: e.detail.value.tel,
  453. code: e.detail.value.code,
  454. }
  455. url = "user/login";
  456. }
  457. this.request({
  458. url,
  459. data,
  460. }).then(res => {
  461. console.log(res, "res")
  462. if (res.code === '200') {
  463. uni.setStorageSync("token", res.data.token);
  464. uni.setStorage({
  465. key: 'login',
  466. data: {
  467. tel: e.detail.value.tel,
  468. },
  469. success: () => {
  470. console.log('success');
  471. if (!this.is_pwd) {
  472. uni.reLaunch({
  473. url: "./password?tel=" + e.detail.value.tel
  474. })
  475. } else {
  476. uni.reLaunch({
  477. url: "../index/index"
  478. })
  479. }
  480. }
  481. });
  482. }
  483. }).catch((res) => {
  484. uni.showToast({
  485. title: res.message,
  486. icon: 'none'
  487. })
  488. });
  489. },
  490. login3(e) {
  491. console.log(e, "e")
  492. if (!e.detail.value.name) {
  493. uni.showToast({
  494. title: "请输入账号",
  495. icon: 'none'
  496. })
  497. this.toggleDelay = true;
  498. setTimeout(() => {
  499. this.toggleDelay = false;
  500. }, 1000)
  501. return false
  502. }
  503. if (!e.detail.value.password) {
  504. uni.showToast({
  505. title: "请输入密码",
  506. icon: 'none'
  507. })
  508. return false
  509. }
  510. let url = "Smdcshop/login";
  511. let data = e.detail.value;
  512. data.type = this.is_login == 2 ? 9 : 10;
  513. this.request({
  514. url,
  515. data,
  516. }).then(res => {
  517. console.log('res',res);
  518. if (res.code === '200') {
  519. uni.setStorageSync("store_user", res.data);
  520. uni.setStorageSync("is_login", this.is_login);
  521. uni.setStorage({
  522. key: this.is_login + 'login',
  523. data: {
  524. tel: e.detail.value.name,
  525. },
  526. success: () => {
  527. console.log('success');
  528. // 门店
  529. if (this.is_login == 3) {
  530. uni.setStorageSync("admin_id", res.data.id);
  531. uni.setStorageSync("store_id", res.data.store_id);
  532. uni.reLaunch({
  533. url: "../../storeInfoIng/storeInfo"
  534. })
  535. }
  536. // 商家
  537. if (this.is_login == 2) {
  538. uni.setStorageSync("admin_id", res.data.id);
  539. uni.reLaunch({
  540. url: "../../statistics/index/index"
  541. })
  542. }
  543. }
  544. });
  545. }
  546. }).catch((res) => {
  547. uni.showToast({
  548. title: res.message,
  549. icon: 'none'
  550. })
  551. });
  552. },
  553. },
  554. onUnload() {
  555. clearInterval(this._timer)
  556. }
  557. }
  558. </script>
  559. <style lang="scss">
  560. page {
  561. height: 100%;
  562. width: 100%;
  563. }
  564. .model_notice {
  565. position: fixed;
  566. width: 100%;
  567. height: 100%;
  568. top: 0;
  569. left: 0;
  570. z-index: 999;
  571. background: rgba(0, 0, 0, 0.5);
  572. }
  573. .model_notice_content {
  574. border-radius: 16rpx;
  575. background: #fff;
  576. font-size: 28rpx;
  577. overflow: hidden;
  578. }
  579. .model_notice_color {
  580. width: 650rpx;
  581. min-height: 350rpx;
  582. padding: 20rpx 40rpx;
  583. padding-bottom: 0;
  584. overflow: hidden;
  585. }
  586. .model_notice_title {
  587. height: 220rpx;
  588. text-align: center;
  589. }
  590. .model_notice_title image {
  591. height: 100%;
  592. width: 100%;
  593. }
  594. .guanbis {
  595. width: 200rpx;
  596. height: 88rpx;
  597. background: #f6f6f6;
  598. border-radius: 8rpx;
  599. color: #666666;
  600. }
  601. .confirm {
  602. width: 330rpx;
  603. height: 88rpx;
  604. background: linear-gradient(142deg, #ff3427 0%, #fc6e4d 95%);
  605. border-radius: 8rpx;
  606. box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(253, 70, 51, 0.16);
  607. color: #FFFFFF;
  608. }
  609. .container {
  610. height: 100%;
  611. width: 100%;
  612. .login-bg {
  613. height: 100%;
  614. width: 100%;
  615. display: block;
  616. }
  617. .login-content {
  618. position: absolute;
  619. top: 0;
  620. left: 0;
  621. height: 100%;
  622. width: 100%;
  623. .page-title {
  624. // margin: 50rpx 20rpx 0rpx;
  625. // line-height: 1;
  626. font-weight: 700;
  627. color: #FFFFFF;
  628. text-align: center;
  629. height: 20%;
  630. font-size: 48rpx;
  631. font-family: PingFang SC, PingFang SC-Semibold;
  632. font-weight: 600;
  633. text-align: center;
  634. color: #ffffff;
  635. text-shadow: 0rpx 3rpx 16rpx 0rpx rgba(1, 82, 198, 0.20);
  636. padding-top: 80rpx;
  637. }
  638. .login-content-home {
  639. position: relative;
  640. height: 800rpx;
  641. .login-content-home-wd100 {
  642. width: 100%;
  643. height: 100%;
  644. .bg-img1 {
  645. width: 490rpx;
  646. height: 800rpx;
  647. opacity: 1;
  648. background: #4893ff;
  649. border-radius: 50rpx;
  650. margin: 0 auto;
  651. }
  652. .bg-img2 {
  653. width: 582rpx;
  654. height: 100%;
  655. opacity: 1;
  656. background: #7fb4ff;
  657. border-radius: 50rpx;
  658. margin: 0 auto;
  659. }
  660. .bg-img3 {
  661. width: 670rpx;
  662. height: 100%;
  663. opacity: 1;
  664. background: #ffffff;
  665. border-radius: 50rpx;
  666. box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(0, 83, 201, 0.30);
  667. margin: 0 auto;
  668. }
  669. }
  670. .login-content-home2 {
  671. width: 100%;
  672. position: absolute;
  673. top: 26rpx;
  674. height: 800rpx;
  675. }
  676. .login-content-home3 {
  677. width: 100%;
  678. position: absolute;
  679. top: 59rpx;
  680. height: 927rpx;
  681. }
  682. }
  683. .cell-home {
  684. width: 100%;
  685. position: absolute;
  686. top: 59rpx;
  687. height: 927rpx;
  688. .cell-home-content {
  689. width: 670rpx;
  690. margin: 0 auto;
  691. padding: 60rpx 40rpx 0 40rpx;
  692. .cell-home-title-text {
  693. opacity: 1;
  694. font-size: 36rpx;
  695. font-family: PingFang SC, PingFang SC-Medium;
  696. font-weight: 500;
  697. text-align: left;
  698. color: #999999;
  699. margin-bottom: 70rpx;
  700. view {
  701. margin-left: 30rpx;
  702. }
  703. .cell-home-title {
  704. opacity: 1;
  705. font-size: 40rpx;
  706. font-weight: 600;
  707. text-align: left;
  708. color: #333333;
  709. }
  710. }
  711. .cell {
  712. margin-bottom: 40rpx;
  713. display: flex;
  714. height: 100rpx;
  715. opacity: 1;
  716. background: #f7f8fc;
  717. border-radius: 8rpx;
  718. padding: 0 20rpx 0 40rpx;
  719. .cell-text {
  720. font-size: 30rpx;
  721. }
  722. .iconquchu {
  723. flex: none;
  724. font-size: 23rpx;
  725. color: #cbcbcb;
  726. width: 50rpx;
  727. height: 50rpx;
  728. }
  729. .code-btn {
  730. flex: none;
  731. width: 170rpx;
  732. height: 60rpx;
  733. border-radius: 30rpx;
  734. background-color: #3387FF;
  735. text-align: center;
  736. line-height: 60rpx;
  737. color: #fff;
  738. font-size: 24rpx;
  739. }
  740. input {
  741. flex: auto;
  742. margin-right: 40rpx;
  743. }
  744. }
  745. .login-btn {
  746. // width: 630rpx;
  747. // height: 98rpx;
  748. // background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  749. // border-radius: 8rpx;
  750. // box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  751. image {
  752. width: 213rpx;
  753. height: 226rpx;
  754. margin-top: 30rpx;
  755. }
  756. }
  757. .shake_animation {
  758. animation-duration: .5s;
  759. animation-timing-function: ease-out;
  760. animation-fill-mode: both;
  761. animation-name: shake
  762. }
  763. @keyframes shake {
  764. 0%,
  765. 100% {
  766. transform: translateX(0)
  767. }
  768. 10% {
  769. transform: translateX(-9px)
  770. }
  771. 20% {
  772. transform: translateX(8px)
  773. }
  774. 30% {
  775. transform: translateX(-7px)
  776. }
  777. 40% {
  778. transform: translateX(6px)
  779. }
  780. 50% {
  781. transform: translateX(-5px)
  782. }
  783. 60% {
  784. transform: translateX(4px)
  785. }
  786. 70% {
  787. transform: translateX(-3px)
  788. }
  789. 80% {
  790. transform: translateX(2px)
  791. }
  792. 90% {
  793. transform: translateX(-1px)
  794. }
  795. }
  796. .login-text {
  797. font-size: 30rpx;
  798. font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  799. font-weight: 400;
  800. text-align: left;
  801. color: #999999;
  802. margin-top: 28rpx;
  803. }
  804. }
  805. }
  806. }
  807. }
  808. // .container {
  809. // padding: 0 60rpx;
  810. // }
  811. .islook {
  812. width: 40rpx;
  813. height: 30rpx;
  814. }
  815. .islooks {
  816. width: 43rpx;
  817. height: 41rpx;
  818. }
  819. // .page-title {
  820. // // padding: 100rpx 0 50rpx;
  821. // font-size: 54rpx;
  822. // // line-height: 1;
  823. // font-weight: 700;
  824. // color: #242424;
  825. // }
  826. .cell {
  827. height: 90rpx;
  828. border-bottom: 2rpx solid #ededed;
  829. margin-bottom: 55rpx;
  830. }
  831. .cell .iconquchu {
  832. flex: none;
  833. font-size: 23rpx;
  834. color: #cbcbcb;
  835. }
  836. .cell .code-btn {
  837. flex: none;
  838. width: 170rpx;
  839. height: 60rpx;
  840. border-radius: 30rpx;
  841. background-color: #3387FF;
  842. text-align: center;
  843. line-height: 60rpx;
  844. color: #fff;
  845. font-size: 24rpx;
  846. }
  847. .cell input {
  848. flex: auto;
  849. margin-right: 40rpx;
  850. }
  851. .xieyi {
  852. font-size: 26rpx;
  853. }
  854. .xieyi .icon {
  855. flex: none;
  856. margin-right: 12rpx;
  857. display: block;
  858. width: 28rpx;
  859. height: 28rpx;
  860. }
  861. .xieyi .xieyi-text {
  862. color: #a8a8a8;
  863. }
  864. .xieyi navigator {
  865. color: #3387FF;
  866. }
  867. .wxlogin {
  868. width: 100%;
  869. margin-top: 20rpx;
  870. }
  871. .wxlogin image {
  872. width: 86rpx;
  873. height: 86rpx;
  874. }
  875. // .login-btn {
  876. // width: 530rpx;
  877. // height: 98rpx;
  878. // background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  879. // border-radius: 8rpx;
  880. // box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  881. // font-size: 32rpx;
  882. // font-weight: 500;
  883. // text-align: center;
  884. // color: #fff;
  885. // line-height: 98rpx;
  886. // margin: 100rpx auto 0;
  887. // }
  888. .login-text {
  889. font-size: 30rpx;
  890. font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  891. font-weight: 400;
  892. text-align: left;
  893. color: #999999;
  894. margin-top: 32rpx;
  895. }
  896. button {
  897. border: none;
  898. background-color: transparent;
  899. outline: none;
  900. }
  901. button::after {
  902. border: none;
  903. }
  904. </style>