otherLogin.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <view class="other-fast-box">
  3. <view class="other-fast-login">
  4. <view class="other-fast-wire"></view>
  5. <view class="other-fast-text sys-color-gray-9">其他登录方式</view>
  6. <view class="other-fast-wire"></view>
  7. </view>
  8. <view class="login-icon">
  9. <image class="login-icon-img" src="/static/img/login/weixin.png" mode="aspectFill"></image>
  10. <image class="login-icon-img" src="/static/img/login/apple.png" mode="aspectFill"></image>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. name: "otherLogin",
  17. components: {},
  18. props: {},
  19. data() {
  20. return {}
  21. },
  22. watch: {},
  23. mounted() {
  24. },
  25. methods: {}
  26. }
  27. </script>
  28. <style scoped lang="scss">
  29. .other-fast-box{
  30. .other-fast-login{
  31. width:calc(100vw - 160rpx);
  32. display: flex;
  33. justify-content: space-between;
  34. .other-fast-text{
  35. font-size: 24rpx;
  36. margin: 0 14rpx;
  37. height: 45rpx;
  38. line-height: 45rpx;
  39. }
  40. .other-fast-wire{
  41. margin-top: 22rpx;
  42. width:calc((100vw - 348rpx) / 2);
  43. height: 1rpx;
  44. background-color: #E0E0E0;
  45. }
  46. }
  47. .login-icon {
  48. padding: 40rpx 156rpx 80rpx 156rpx;
  49. display: flex;
  50. justify-content: space-between;
  51. .login-icon-img {
  52. width: 88rpx;
  53. height: 88rpx;
  54. border-radius: 50%;
  55. }
  56. }
  57. }
  58. </style>