userCenterHomeMaintenance.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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.ProductInformation')}}</span>
  5. <span :class="informationsClass==2?'information2':'information1'" @click="getInformation(2)" class="cursor">{{$t('common.coreTechnology')}}</span>
  6. <span :class="informationsClass==3?'information2':'information1'" @click="getInformation(3)" class="cursor">{{$t('common.ProjectPerformance')}}</span>
  7. </div>
  8. <userCenterHomeProductInformations v-if="informationsClass==1"></userCenterHomeProductInformations>
  9. <userCenterHomeCoreTechnology v-if="informationsClass==2"></userCenterHomeCoreTechnology>
  10. <userCenterHomeProjectPerformance v-if="informationsClass==3"></userCenterHomeProjectPerformance>
  11. </div>
  12. </template>
  13. <script>
  14. import userCenterHomeProductInformations from './userCenterHomeProductInformations' // 产品信息
  15. import userCenterHomeCoreTechnology from './userCenterHomeCoreTechnology' // 核心技术
  16. import userCenterHomeProjectPerformance from './userCenterHomeProjectPerformance' // 项目业绩
  17. export default {
  18. name: 'userCenterHomeMaintenance',
  19. components:{userCenterHomeProductInformations,userCenterHomeCoreTechnology,userCenterHomeProjectPerformance},
  20. data () {
  21. return {
  22. informationsClass:'1',
  23. dialogVisible: false,
  24. }
  25. },
  26. methods:{
  27. getInformation(num){
  28. this.informationsClass=num
  29. },
  30. }
  31. }
  32. </script>
  33. <style scoped>
  34. .information1 {
  35. display: inline-block;
  36. padding: 0 20px;
  37. min-width: 123px;
  38. height: 100%;
  39. border:1px solid rgba(228, 228, 228, 1);
  40. text-align: center;
  41. background: #f9f9f9;
  42. color: #999;
  43. }
  44. .information2 {
  45. display: inline-block;
  46. padding: 0 20px;
  47. min-width: 123px;
  48. height: 100%;
  49. border-top:3px solid #2c5589;
  50. text-align: center;
  51. color: #2c5589;
  52. }
  53. .information1:hover {
  54. color: #FF0036;
  55. }
  56. </style>