1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <template>
- <div style="background: #fff;">
- <div style="height:50px;line-height:50px">
- <span :class="informationsClass==1?'information2':'information1'" @click="getInformation(1)" class="cursor">{{$t('common.Information')}}</span>
- <!-- <span :class="informationsClass==2?'information2':'information1'" @click="getInformation(2)" class="cursor">数据信息</span> -->
- <span :class="informationsClass==3?'information2':'information1'" @click="getInformation(3)" class="cursor">{{$t('common.PeriodicalInformation')}}</span>
- </div>
- <userCenterMaintenanceInformations v-if="informationsClass==1"></userCenterMaintenanceInformations>
- <userCenterMaintenanceDataInformations v-if="informationsClass==2"></userCenterMaintenanceDataInformations>
- <userCenterMaintenanceJournalInformations v-if="informationsClass==3"></userCenterMaintenanceJournalInformations>
- </div>
- </template>
- <script>
- import userCenterMaintenanceInformations from './userCenterMaintenanceInformations' // 资讯信息
- // import userCenterMaintenanceDataInformations from './userCenterMaintenanceDataInformations' // 数据信息
- import userCenterMaintenanceJournalInformations from './userCenterMaintenanceJournalInformations' // 期刊信息
- export default {
- name: 'userCenterMaintenance',
- components:{userCenterMaintenanceInformations,
- // userCenterMaintenanceDataInformations,
- userCenterMaintenanceJournalInformations},
- data () {
- return {
- informationsClass:'1',
- dialogVisible: false,
- }
- },
- methods:{
- getInformation(num){
- this.informationsClass=num
- },
- }
- }
- </script>
- <style scoped>
- .information1 {
- display: inline-block;
- /* width: 130px; */
- padding: 0 20px;
- min-width: 123px;
- height: 100%;
- border:1px solid rgba(228, 228, 228, 1);
- text-align: center;
- background: #f9f9f9;
- color: #999;
- }
- .information2 {
- display: inline-block;
- padding: 0 20px;
- min-width: 123px;
- height: 100%;
- border-top:3px solid #2c5589;
- text-align: center;
- color: #2c5589;
- }
- .information1:hover {
- color: #FF0036;
- }
- </style>
|