musicTab.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <style lang='scss'>
  2. .only-there .ant-tabs-bar {
  3. background: white;
  4. padding: 0 24px;
  5. }
  6. .ant-card-head .ant-tabs-bar {
  7. padding: 0;
  8. }
  9. #updateInfo .ant-modal-content,
  10. #updateInfo .ant-modal-body {
  11. width: 500px;
  12. position: relative;
  13. padding-top: 10px;
  14. .updateBOX {
  15. height: 600px;
  16. overflow: auto;
  17. }
  18. }
  19. .Updatecontent {
  20. padding: 0 20px 40px;
  21. position: relative;
  22. .Updateitem {
  23. margin-bottom: 30px;
  24. }
  25. }
  26. .Updatetitle {
  27. text-align: center;
  28. font-size: 22px;
  29. font-weight: 500;
  30. color: #1890ff;
  31. margin-bottom: 20px;
  32. /* margin-top: 20px; */
  33. }
  34. .Updatetime {
  35. font-size: 16px;
  36. font-weight: 700;
  37. color: #000;
  38. margin-bottom: 15px;
  39. }
  40. .updateicon {
  41. font-size: 26px;
  42. position: relative;
  43. top: 4px;
  44. }
  45. .updateSpan {
  46. margin-left: 10px;
  47. }
  48. .textTitle {
  49. font-weight: 600;
  50. font-size: 1.17em;
  51. font-family: Helvetica, Arial, '\5b8b\4f53', sans-serif;
  52. }
  53. .okBtn {
  54. position: absolute;
  55. right: 3%;
  56. bottom: 3%;
  57. }
  58. .updatelist {
  59. .circular {
  60. display: inline-block;
  61. width: 3px;
  62. height: 3px;
  63. border-radius: 50%;
  64. color: #999;
  65. }
  66. }
  67. </style>
  68. <template>
  69. <div class="music-tab" style="background: white; padding: 20px">
  70. <a-tabs v-model="active" @change="callBack">
  71. <a-tab-pane key="1" tab="网易云">
  72. <wyyMusic />
  73. </a-tab-pane>
  74. <a-tab-pane key="2" tab="抖音">
  75. <dyMusic v-if="active == '2'" />
  76. </a-tab-pane>
  77. </a-tabs>
  78. </div>
  79. </template>
  80. <script>
  81. import wyyMusic from './musicMaterial.vue'
  82. import dyMusic from './musicBytedance.vue'
  83. import { mapActions } from 'vuex'
  84. export default {
  85. name: 'music-tab',
  86. components: {
  87. wyyMusic,
  88. dyMusic,
  89. },
  90. data() {
  91. return {
  92. active: '1',
  93. loading: true,
  94. center: null,
  95. loginfo: {},
  96. visitFields: ['ip', 'visit'],
  97. visitInfo: [],
  98. indicator: <a-icon type="loading" style="font-size: 24px" spin />,
  99. roleCode: localStorage.getItem('roleCode'),
  100. visible: false, //更新通知消息提示框
  101. updateTime: ['2020-06-10', '2020-06-17', '2020-06-24', '2020-07-01'],
  102. versionId: 0, //存储版本号 判断通知什么时候显示
  103. }
  104. },
  105. created() {},
  106. methods: {
  107. ...mapActions(['clearPlayList']),
  108. callBack() {
  109. if(this.active=='1'){
  110. }else{
  111. this.clearPlayList()
  112. }
  113. },
  114. },
  115. mounted() {},
  116. }
  117. </script>
  118. <style lang="scss" scoped>
  119. .circle-cust {
  120. position: relative;
  121. top: 28px;
  122. left: -100%;
  123. }
  124. .extra-wrapper {
  125. line-height: 55px;
  126. padding-right: 24px;
  127. .extra-item {
  128. display: inline-block;
  129. margin-right: 24px;
  130. a {
  131. margin-left: 24px;
  132. }
  133. }
  134. }
  135. /* 首页访问量统计 */
  136. .head-info {
  137. position: relative;
  138. text-align: left;
  139. padding: 0 32px 0 0;
  140. min-width: 125px;
  141. &.center {
  142. text-align: center;
  143. padding: 0 32px;
  144. }
  145. span {
  146. color: rgba(0, 0, 0, 0.45);
  147. display: inline-block;
  148. font-size: 0.95rem;
  149. line-height: 42px;
  150. margin-bottom: 4px;
  151. }
  152. p {
  153. line-height: 42px;
  154. margin: 0;
  155. a {
  156. font-weight: 600;
  157. font-size: 1rem;
  158. }
  159. }
  160. }
  161. </style>
  162. <style lang="less">
  163. .ant-tabs-bar {
  164. margin: 0 0 12px 0;
  165. /* height: 55px; */
  166. border-bottom: 1px solid #e8e8e8;
  167. outline: none;
  168. -webkit-transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  169. transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  170. }
  171. </style>