language.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <view>
  3. <!-- 头部 -->
  4. <headContent>
  5. <template #left>
  6. <reverse-back />
  7. </template>
  8. <template #content>
  9. <view class="haed-title">
  10. 语言切换
  11. </view>
  12. </template>
  13. </headContent>
  14. <gap />
  15. <view class="set-list">
  16. <view class="set-item">
  17. <text>简体中文</text>
  18. <view class="set-moer iconfont">&#xe6c5;</view>
  19. </view>
  20. <view class="set-item">
  21. <text>English</text>
  22. <view class="set-moer">
  23. </view>
  24. </view>
  25. <view class="set-item">
  26. <text>한국어</text>
  27. <view class="set-moer">
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. name: 'language',
  36. data() {
  37. return {
  38. };
  39. },
  40. methods: {
  41. }
  42. }
  43. </script>
  44. <style lang="scss" scoped>
  45. .set-list {
  46. width: 100%;
  47. padding: 0 $pages-padding;
  48. .set-item {
  49. display: flex;
  50. justify-content: space-between;
  51. align-items: center;
  52. height: 90rpx;
  53. width: 100%;
  54. border-bottom: 1rpx solid $border-color;
  55. font-size: 24rpx;
  56. color: #0f0f0f;
  57. text {
  58. flex-shrink: 0;
  59. }
  60. .set-moer {
  61. flex-shrink: 0;
  62. display: flex;
  63. align-items: center;
  64. color: $Theme-Color;
  65. }
  66. }
  67. }
  68. </style>