userCenterMaintenance.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div style="background: #fff;">
  3. <div style="height:50px;line-height:50px">
  4. <span :class="informationsClass==1?'information2':'information1'" @click="getInformation(1)" class="cursor">{{$t('common.Information')}}</span>
  5. <!-- <span :class="informationsClass==2?'information2':'information1'" @click="getInformation(2)" class="cursor">数据信息</span> -->
  6. <span :class="informationsClass==3?'information2':'information1'" @click="getInformation(3)" class="cursor">{{$t('common.PeriodicalInformation')}}</span>
  7. </div>
  8. <userCenterMaintenanceInformations v-if="informationsClass==1"></userCenterMaintenanceInformations>
  9. <userCenterMaintenanceDataInformations v-if="informationsClass==2"></userCenterMaintenanceDataInformations>
  10. <userCenterMaintenanceJournalInformations v-if="informationsClass==3"></userCenterMaintenanceJournalInformations>
  11. </div>
  12. </template>
  13. <script>
  14. import userCenterMaintenanceInformations from './userCenterMaintenanceInformations' // 资讯信息
  15. // import userCenterMaintenanceDataInformations from './userCenterMaintenanceDataInformations' // 数据信息
  16. import userCenterMaintenanceJournalInformations from './userCenterMaintenanceJournalInformations' // 期刊信息
  17. export default {
  18. name: 'userCenterMaintenance',
  19. components:{userCenterMaintenanceInformations,
  20. // userCenterMaintenanceDataInformations,
  21. userCenterMaintenanceJournalInformations},
  22. data () {
  23. return {
  24. informationsClass:'1',
  25. dialogVisible: false,
  26. }
  27. },
  28. methods:{
  29. getInformation(num){
  30. this.informationsClass=num
  31. },
  32. }
  33. }
  34. </script>
  35. <style scoped>
  36. .information1 {
  37. display: inline-block;
  38. /* width: 130px; */
  39. padding: 0 20px;
  40. min-width: 123px;
  41. height: 100%;
  42. border:1px solid rgba(228, 228, 228, 1);
  43. text-align: center;
  44. background: #f9f9f9;
  45. color: #999;
  46. }
  47. .information2 {
  48. display: inline-block;
  49. padding: 0 20px;
  50. min-width: 123px;
  51. height: 100%;
  52. border-top:3px solid #2c5589;
  53. text-align: center;
  54. color: #2c5589;
  55. }
  56. .information1:hover {
  57. color: #FF0036;
  58. }
  59. </style>