BaseSetting.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <div class="account-settings-info-view">
  3. <a-row :gutter="16">
  4. <a-col :md="24" :lg="16">
  5. <a-form layout="vertical">
  6. <a-form-item
  7. label="昵称"
  8. >
  9. <a-input placeholder="给自己起个名字"/>
  10. </a-form-item>
  11. <a-form-item
  12. label="Bio"
  13. >
  14. <a-textarea rows="4" placeholder="You are not alone."/>
  15. </a-form-item>
  16. <a-form-item
  17. label="电子邮件"
  18. :required="false"
  19. >
  20. <a-input placeholder="exp@admin.com"/>
  21. </a-form-item>
  22. <a-form-item
  23. label="加密方式"
  24. :required="false"
  25. >
  26. <a-select defaultValue="aes-256-cfb">
  27. <a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
  28. <a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
  29. <a-select-option value="chacha20">chacha20</a-select-option>
  30. </a-select>
  31. </a-form-item>
  32. <a-form-item
  33. label="连接密码"
  34. :required="false"
  35. >
  36. <a-input placeholder="h3gSbecd"/>
  37. </a-form-item>
  38. <a-form-item
  39. label="登录密码"
  40. :required="false"
  41. >
  42. <a-input placeholder="密码"/>
  43. </a-form-item>
  44. <a-form-item>
  45. <a-button type="primary">提交</a-button>
  46. <a-button style="margin-left: 8px">保存</a-button>
  47. </a-form-item>
  48. </a-form>
  49. </a-col>
  50. <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
  51. <div class="ant-upload-preview" @click="$refs.modal.edit(1)">
  52. <a-icon type="cloud-upload-o" class="upload-icon"/>
  53. <div class="mask">
  54. <a-icon type="plus"/>
  55. </div>
  56. <img :src="option.img"/>
  57. </div>
  58. </a-col>
  59. </a-row>
  60. <avatar-modal ref="modal">
  61. </avatar-modal>
  62. </div>
  63. </template>
  64. <script>
  65. import AvatarModal from './AvatarModal'
  66. export default {
  67. components: {
  68. AvatarModal
  69. },
  70. data() {
  71. return {
  72. // cropper
  73. preview: {},
  74. option: {
  75. img: '/avatar2.jpg',
  76. info: true,
  77. size: 1,
  78. outputType: 'jpeg',
  79. canScale: false,
  80. autoCrop: true,
  81. // 只有自动截图开启 宽度高度才生效
  82. autoCropWidth: 180,
  83. autoCropHeight: 180,
  84. fixedBox: true,
  85. // 开启宽度和高度比例
  86. fixed: true,
  87. fixedNumber: [1, 1]
  88. }
  89. }
  90. },
  91. methods: {}
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. .avatar-upload-wrapper {
  96. height: 200px;
  97. width: 100%;
  98. }
  99. .ant-upload-preview {
  100. position: relative;
  101. margin: 0 auto;
  102. width: 100%;
  103. max-width: 180px;
  104. border-radius: 50%;
  105. box-shadow: 0 0 4px #ccc;
  106. .upload-icon {
  107. position: absolute;
  108. top: 0;
  109. right: 10px;
  110. font-size: 1.4rem;
  111. padding: 0.5rem;
  112. background: rgba(222, 221, 221, 0.7);
  113. border-radius: 50%;
  114. border: 1px solid rgba(0, 0, 0, 0.2);
  115. }
  116. .mask {
  117. opacity: 0;
  118. position: absolute;
  119. background: rgba(0, 0, 0, 0.4);
  120. cursor: pointer;
  121. transition: opacity 0.4s;
  122. &:hover {
  123. opacity: 1;
  124. }
  125. i {
  126. font-size: 2rem;
  127. position: absolute;
  128. top: 50%;
  129. left: 50%;
  130. margin-left: -1rem;
  131. margin-top: -1rem;
  132. color: #d6d6d6;
  133. }
  134. }
  135. img, .mask {
  136. width: 100%;
  137. max-width: 180px;
  138. height: 100%;
  139. border-radius: 50%;
  140. overflow: hidden;
  141. }
  142. }
  143. </style>