baseInfo.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <div class="base-info">
  3. <p class="info">基本信息</p>
  4. <div class="abstract">
  5. <img class="info-img" src="/static/img/INFO.jpg">
  6. <p class="my-text">{{infoText}}</p>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. import axios from 'axios'
  12. import { mapMutations } from 'vuex'
  13. export default {
  14. components: {},
  15. mixins: [],
  16. props: {},
  17. data() {
  18. return {
  19. picture:"Pj1101010001_huiyunying.jpg",
  20. infoText:"",
  21. };
  22. },
  23. computed: {},
  24. mounted() {
  25. this.init();
  26. },
  27. methods: {
  28. //全局projextId的映射
  29. ...mapMutations(['getProId']),
  30. //基本信息
  31. init(){
  32. axios.get(`/equipment/info-mng-backend/config/getPresentation?projectId=${this.$store.state.projectId}`).then(res=>{
  33. let data = res.data.data;
  34. this.infoText = data.presentation;
  35. this.picture = data.picture;
  36. })
  37. }
  38. }
  39. };
  40. </script>
  41. <style scoped lang="less" >
  42. .base-info {
  43. width: 32.8%;
  44. border: 1px solid#ebecf0;
  45. background: #fff;
  46. margin-right: 10px;
  47. box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
  48. border-radius: 3px;
  49. min-width: 528px;
  50. .info {
  51. line-height: 50px;
  52. background: #f7f9fc;
  53. border: 0 solid #f2f2f2;
  54. padding-left: 20px;
  55. font-weight: bolder;
  56. font-size: 18px;
  57. color: #3b4254;
  58. border-top-left-radius: 3px;
  59. border-top-right-radius: 3px;
  60. }
  61. .abstract {
  62. padding: 20px;
  63. display: flex;
  64. .info-img {
  65. min-width: 188px;
  66. height: 232px;
  67. }
  68. .my-text {
  69. display: inline-block;
  70. padding-left: 20px;
  71. //font-size: 14px;
  72. text-indent: 2em;
  73. }
  74. }
  75. }
  76. </style>