收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
869
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

vue 布局页，vue模板页，页面跳转，子页面切换，页面切换。页面模板，布局模板。vue路由配置

5448人阅读 2020/11/16 21:31 总访问：5404584 评论：0 收藏：0 手机
分类: 前端

vue里边点击菜单切换页面的效果，其实和mvc里边的布局页很类似。使用router-view来挖坑，和mvc里边的@RenderBody()挖坑一样，都是一个占位符。然后页面切换就是使用this.$router.push(path)方法即可。当然还要配合一点路由配置就行了。

比如我们要实现这样一个简单的页面切换：

点击我的实验可以跳转到我的实验

就这种简单的页面切换效果。其实顶部还有切换菜单，相当于顶部1级，这块2级，其实实现方式完全一样，甚至比mvc里边的嵌套布局页，或者叫二级布局页还要简单，耦合性定低。

实现上面的布局

页面结构

路由配置

核心就是设置children

如果我的实验里边还需要进行页面切换，那么在我的实验里边在配置children就可以了。同样的我这里的个人中心其实也是另外一个页面下面的children。可以所以嵌套

index页面

  1. <template>
  2.   <div class="app-container">
  3.     <div class="usercenter_left">
  4.       <div class="userinfo">
  5.         <div class="headimgwapper">
  6.           <img class="headimg" src="https://img.tnblog.net/userdata/heads/dbc68332d521436c983fbc3adc6d9c7f.jpeg" alt=""
  7.             srcset="">
  8.         </div>
  9.         <div style="padding:20px">
  10.           <div class="sumtimes">
  11.             <span
  12.               style="background: #FE4444;height: 20px;width: 20px;color:#fff;display: inline-block;border-radius: 50px;line-height: 20px;text-align: center;">累</span>
  13.             <span>计时长：506 小时 46 分2</span>
  14.           </div>
  15.           <div class="onlinetimes">
  16.             <span
  17.               style="background: #EA740B;height: 20px;width: 20px;color:#fff;display: inline-block;border-radius: 50px;line-height: 20px;text-align: center;">今</span>
  18.             <span>日时长：25 小时 46 分 50 秒</span>
  19.           </div>
  20.         </div>
  21.       </div>
  22.       <div class="menuwapper">
  23.         <div class="menuitem">学期报告</div>
  24.         <div class="menuitem menuitemfocus" @click="jump('/user/myfeedback', $event)">我的反馈</div>
  25.         <div class="menuitem">我的评估</div>
  26.         <div class="menuitem" @click="jump('/user/mylabroom', $event)">我的实验</div>
  27.         <div class="menuitem">我的产教</div>
  28.         <div class="menuitem">我的考试</div>
  29.         <div class="menuitem">个人信息</div>
  30.       </div>
  31.     </div>
  32.     <div class="usercenter_right">
  33.       <router-view />
  34.     </div>
  35.   </div>
  36. </template>
  38. <script>
  39. export default {
  40.   data() {
  41.     return {
  42.       courseID: '',
  43.       labId: '',
  44.       chapter: {},
  45.     }
  46.   },
  47.   mounted() {
  48.   },
  49.   methods: {
  50.     jump(path, event) {
  52.       //后面换成判断地址，根据地址栏来选中
  54.       //先把元素的样式全部回归成默认状态
  55.       let childNodes = event.currentTarget.parentNode.childNodes
  56.       for (let index = 0; index < childNodes.length; index++) {
  57.         const element = childNodes[index];
  58.         element.className = "menuitem"
  59.       }
  60.       //给当前点击的元素添加选中样式
  61.       event.currentTarget.className = "menuitem menuitemfocus"
  62.       //进行页面跳转
  63.       this.$router.push(path)
  64.     }
  65.   }
  66. }
  67. </script>
  69. <style scoped="scoped">
  70. .app-container {
  71.   width: 1200px;
  72.   /* min-height: 200px; */
  73.   display: flex;
  74.   margin: 20px auto;
  75. }
  77. .usercenter_left {
  78.   width: 235px;
  79. }
  81. .usercenter_left .userinfo {
  82.   background-color: #fff;
  83.   padding-top: 20px;
  84.   padding-bottom: 10px;
  85. }
  87. .usercenter_left .headimgwapper {
  88.   text-align: center;
  89. }
  91. .usercenter_left .headimg {
  92.   width: 100px;
  93.   height: 100px;
  94.   border-radius: 50%;
  95. }
  97. .usercenter_left .menuwapper {
  98.   min-height: 300px;
  99.   margin-top: 20px;
  100.   /* width: 240px; */
  101.   background-color: #fff;
  102. }
  104. .usercenter_left .sumtimes {
  105.   font-size: 13px;
  106.   font-family: MicrosoftYaHei-, MicrosoftYaHei;
  107.   font-weight: normal;
  108.   color: #000000;
  109. }
  111. .usercenter_left .onlinetimes {
  112.   font-size: 13px;
  113.   margin-top: 10px;
  114.   font-family: MicrosoftYaHei-, MicrosoftYaHei;
  115.   font-weight: normal;
  116.   color: #000000;
  117. }
  119. .menuwapper .menuitem {
  120.   text-align: center;
  121.   /* width: 66px; */
  122.   height: 60px;
  123.   font-size: 15px;
  124.   font-family: MicrosoftYaHei-, MicrosoftYaHei;
  125.   font-weight: normal;
  126.   color: #747774;
  127.   cursor: pointer;
  128.   letter-spacing: 2px;
  129.   /* line-height: 21px; */
  130. }
  132. .menuwapper .menuitem:first-child {
  133.   padding-top: 34px;
  134. }
  136. .menuwapper .menuitem:hover {
  137.   color: #1C6CB8;
  138. }
  140. .menuwapper .menuitemfocus {
  141.   color: #1C6CB8;
  142. }
  144. .usercenter_right {
  145.   flex: 1;
  146.   background-color: #fff;
  147.   margin-left: 20px;
  148.   /* min-height: 200px; */
  149. }
  150. </style>

index页面主要就是使用<router-view />来做占位符。以及页面的切换方法，核心就是this.$router.push(path)。还有就是页面切换时候的菜单选中效果的处理。

菜单选中调整后使用的是
具体分析请看：https://www.tnblog.net/aojiancc2/article/details/7902

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       stuInfo: JSON.parse(localStorage['userinfo']).stuInfo,
  6.       courseID: '',
  7.       labId: '',
  8.       chapter: {}
  9.     }
  10.   },
  11. watch: {
  12.   // 监听路由变化的时候在进行菜单选中
  13.   // $route(to, from) {
  14.   //   console.log('导航页to', to)
  15.   //   this.choiseMenu(to.fullPath)
  16.   // }
  17. },
  18. mounted() {
  19.   const routePath = this.$route.path
  20.   this.choiseMenu(routePath)
  21. },
  22. methods: {
  23.   // 菜单选中，可以跳转的路由在判断应该选中的菜单
  24.   choiseMenu(routePath) {
  25.     const childNodes = document.getElementById('usersubmenu').getElementsByTagName('div')
  26.     for (let index = 0; index < childNodes.length; index++) {
  27.       const element = childNodes[index]
  28.       console.log(element.getAttribute('href'))
  29.       if (routePath === element.getAttribute('href')) {
  30.         element.className = 'menuitem menuitemfocus'
  31.       } else {
  32.         element.className = 'menuitem'
  33.       }
  34.     }
  35.   },
  36.   jump(event) {
  37.     const href = event.currentTarget.getAttribute('href')
  38.     // 菜单选中
  39.     this.choiseMenu(href)
  40.     this.$router.push(href)
  41.   }
  42. }
  43. }
  44. </script>

我的实验页面

子页面的内容其实就不重要了，这里可以当中一个模板贴一下

  1. <template>
  2.     <div class="labroom-container">
  3.         <div class="title-wapper">
  4.             <div class="title">我的实验</div>
  5.         </div>
  6.         <div class="split-line">
  7.         </div>
  8.         <div class="labroom-content">
  9.             <div class="labroom-info">
  10.                 <el-row :gutter="20">
  11.                     <el-col :span="4">
  12.                         <div class="labroom-info-item">
  13.                             <div  class="labroom-info-desc-wapper">
  14.                                 <div>
  15.                                     188个
  16.                                 </div>
  17.                                 <div>
  18.                                     实验总数
  19.                                 </div>
  20.                             </div>
  21.                         </div>
  22.                     </el-col>
  23.                     <el-col :span="4">
  24.                         <div class="labroom-info-item">
  25.                             <div  class="labroom-info-desc-wapper">
  26.                                 <div>
  27.                                     198个
  28.                                 </div>
  29.                                 <div>
  30.                                     应完成数
  31.                                 </div>
  32.                             </div>
  33.                         </div>
  34.                     </el-col>
  35.                     <el-col :span="4">
  36.                         <div class="labroom-info-item">
  37.                             <div  class="labroom-info-desc-wapper">
  38.                                 <div>
  39.                                     188个
  40.                                 </div>
  41.                                 <div>
  42.                                     已完成数
  43.                                 </div>
  44.                             </div>
  45.                         </div>
  46.                     </el-col>
  47.                     <el-col :span="4">
  48.                         <div class="labroom-info-item">
  49.                             <div  class="labroom-info-desc-wapper">
  50.                                 <div>
  51.                                     188个
  52.                                 </div>
  53.                                 <div>
  54.                                     整体完成率
  55.                                 </div>
  56.                             </div>
  57.                         </div>
  58.                     </el-col>
  59.                     <el-col :span="4">
  60.                         <div class="labroom-info-item">
  61.                             <div  class="labroom-info-desc-wapper">
  62.                                 <div>
  63.                                     79%
  64.                                 </div>
  65.                                 <div>
  66.                                     必做完成率
  67.                                 </div>
  68.                             </div>
  69.                         </div>
  70.                     </el-col>
  71.                     <el-col :span="4">
  72.                         <div class="labroom-info-item">
  73.                             <div  class="labroom-info-desc-wapper">
  74.                                 <div>
  75.                                     7名
  76.                                 </div>
  77.                                 <div>
  78.                                     班级排名
  79.                                 </div>
  80.                             </div>
  81.                         </div>
  82.                     </el-col>
  83.                 </el-row>
  84.             </div>
  85.         </div>
  86.     </div>
  87. </template>
  88. <script>
  89. export default {
  90.     // 组件名字
  91.     name: 'MyLabroom',
  92.     // 组件参数
  93.     props: {
  94.         percentage: {
  95.             type: Number,
  96.             default: 0
  97.         },
  98.         title: {
  99.             type: String,
  100.             default: ''
  101.         },
  102.     },
  103.     data() {
  104.         return {
  105.             courseID: '',
  106.             labId: '',
  107.             chapter: {},
  108.         }
  109.     },
  110.     mounted() {
  111.         this.initPic()
  112.     },
  113.     // 组件方法
  114.     methods: {
  115.         initPic() {
  116.         }
  117.     }
  118. }
  119. </script>
  120. <style scoped="scoped" lang="scss">
  121. .labroom-container {
  123.     padding: 0 20px;
  125.     .title-wapper {
  126.         height: 60px;
  127.         // background-color: #ffabcd;
  128.         line-height: 60px;
  129.     }
  131.     .title {
  132.         font-family: MicrosoftYaHei-, MicrosoftYaHei;
  133.         font-weight: normal;
  134.         color: #333339;
  135.         font-size: 16px;
  136.     }
  138.     .split-line {
  139.         height: 1px;
  140.         background: #EAEEF0;
  141.         // width: 100%;
  142.         margin-left: -20px;
  143.         margin-right: -20px;
  144.     }
  146.     .labroom-info {
  148.         margin-top: 26px;
  150.         .labroom-info-item {
  151.             height: 62px;
  152.             background: #ECF5FF;
  153.             border-radius: 2px 2px 2px 2px;
  154.             opacity: 1;
  155.             border: 1px solid #B3D8FF;
  156.             text-align: center;
  157.             display: flex;
  158.             justify-content: center;
  160.             font-size: 12px;
  161.             font-family: MicrosoftYaHei-Regular, MicrosoftYaHei;
  162.             font-weight: 400;
  163.             color: #409EFF;
  165.             .labroom-info-desc-wapper
  166.             {
  167.                 align-self: center;
  168.             }
  170.         }
  172.     }
  173. }
  174. </style>

内容布局多的一版本：

实验页面

贴一下代码可以当一个模板,需要类似的样式可以直接用

  1. <template>
  2.     <div class="feedback-container">
  3.         <div class="title-wapper">
  4.             <div class="title">我的反馈</div>
  5.         </div>
  6.         <div class="split-line">
  7.         </div>
  8.         <div>
  9.             <div class="feedback-content">
  10.                 <div class="feedback-item">
  11.                     <div class="feedback-title">
  12.                         <div class="feedback-time">
  13.                             反馈时间: 2020-09-28 15:48:51
  14.                         </div>
  15.                         <div class="feedback-type">
  16.                             问题类型：系统问题
  17.                         </div>
  18.                     </div>
  19.                     <div class="feedback-message">
  20.                         反馈内容：如果是浏览速度、系统BUG、视觉显示等问题，请注明您使用的操作系统、浏览器以及版本号，以便我们尽快对应查
  21.                         找问题并解决如果是浏览速度、系统BUG、视觉显示等问题，请注明您使用的操作系统、浏尽快对应查找问题并解决。
  22.                     </div>
  23.                     <div class="feedback-descible">
  24.                         处理描述：如果是浏览速度、系统BUG、视觉显示等问题，请注明您使用的操作系统。
  25.                     </div>
  26.                     <div class="feedback-dealinfo">
  27.                         <div class="deal-result">
  28.                             <span>处理结果：</span>
  29.                             <span>已解决</span>
  30.                         </div>
  31.                         <div class="deal-time">
  32.                             处理时间：2020-09-30 10:31:28
  33.                         </div>
  34.                     </div>
  35.                 </div>
  37.                 <div class="feedback-item">
  38.                     <div class="feedback-title">
  39.                         <div class="feedback-time">
  40.                             反馈时间: 2020-09-28 15:48:51
  41.                         </div>
  42.                         <div class="feedback-type">
  43.                             问题类型：系统问题
  44.                         </div>
  45.                     </div>
  46.                     <div class="feedback-message">
  47.                         反馈内容：如果是浏览速度、系统BUG、视觉显示等问题，请注明您使用的操作系统、浏览器以及版本号，以便我们尽快对应查
  48.                         找问题并解决如果是浏览速度、系统BUG、视觉显示等问题，请注明您使用的操作系统、浏尽快对应查找问题并解决。
  49.                     </div>
  50.                     <div class="feedback-descible">
  51.                         处理描述：如果是浏览速度、系统BUG、视觉显示等问题，请注明您使用的操作系统。
  52.                     </div>
  53.                     <div class="feedback-dealinfo">
  54.                         <div class="deal-result">
  55.                             <span>处理结果：</span>
  56.                             <span>已解决</span>
  57.                         </div>
  58.                         <div class="deal-time">
  59.                             处理时间：2020-09-30 10:31:28
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.     </div>
  66. </template>
  67. <script>
  68. export default {
  69.     // 组件名字
  70.     name: 'Myfeedback',
  71.     // 组件参数
  72.     props: {
  73.         percentage: {
  74.             type: Number,
  75.             default: 0
  76.         },
  77.         title: {
  78.             type: String,
  79.             default: ''
  80.         },
  81.     },
  82.     data() {
  83.         return {
  84.             courseID: '',
  85.             labId: '',
  86.             chapter: {},
  87.         }
  88.     },
  89.     mounted() {
  90.         this.initPic()
  91.     },
  92.     // 组件方法
  93.     methods: {
  94.         initPic() {
  95.         }
  96.     }
  97. }
  98. </script>
  99. <style scoped="scoped" lang="scss">
  100. .feedback-container {
  102.     padding: 0 20px;
  104.     .title-wapper {
  105.         height: 60px;
  106.         // background-color: #ffabcd;
  107.         line-height: 60px;
  108.     }
  110.     .title {
  111.         font-family: MicrosoftYaHei-, MicrosoftYaHei;
  112.         font-weight: normal;
  113.         color: #333339;
  114.         font-size: 16px;
  115.     }
  117.     .split-line {
  118.         height: 1px;
  119.         background: #EAEEF0;
  120.         // width: 100%;
  121.         margin-left: -20px;
  122.         margin-right: -20px;
  123.     }
  125.     // .feedback-content {
  126.     // }
  128.     .feedback-item {
  130.         margin-top: 20px;
  132.         border: 1px solid #EAEEF0;
  133.         padding-bottom: 20px;
  135.         .feedback-title {
  136.             display: flex;
  137.             background: #EAEEF0;
  138.             height: 53px;
  139.             line-height: 53px;
  140.             padding: 0 20px;
  142.             .feedback-time {
  143.                 font-size: 14px;
  144.                 font-family: MicrosoftYaHei-, MicrosoftYaHei;
  145.                 font-weight: normal;
  146.                 color: #7C7C7C;
  147.             }
  149.             .feedback-type {
  150.                 font-size: 14px;
  151.                 margin-left: 43px;
  152.                 font-family: MicrosoftYaHei-, MicrosoftYaHei;
  153.                 font-weight: normal;
  154.                 color: #7C7C7C;
  155.             }
  157.         }
  159.         .feedback-message {
  160.             margin-top: 20px;
  161.             font-size: 14px;
  162.             font-family: MicrosoftYaHei-, MicrosoftYaHei;
  163.             font-weight: normal;
  164.             letter-spacing: 1px;
  165.             color: #333339;
  166.             padding: 0 20px;
  167.         }
  169.         .feedback-descible {
  170.             margin-top: 20px;
  171.             font-size: 14px;
  172.             padding: 0 20px;
  173.             letter-spacing: 1px;
  174.             font-family: MicrosoftYaHei-, MicrosoftYaHei;
  175.             font-weight: normal;
  176.             color: #7C7C7C;
  177.         }
  179.         .feedback-dealinfo {
  180.             display: flex;
  181.             padding: 0 20px;
  182.             margin-top: 15px;
  184.             .deal-result
  185.             {
  186.                 font-size: 14px;
  187.                 font-family: MicrosoftYaHei-, MicrosoftYaHei;
  188.                 font-weight: normal;
  189.             }
  191.             .deal-result span:first-child
  192.             {
  193.                 color: #7C7C7C;
  194.             }
  196.             .deal-result span:last-child
  197.             {
  198.                 color: #28B28B;
  199.             }
  201.             .deal-time {
  202.                 margin-left: 50px;
  203.                 font-size: 14px;
  204.                 font-family: MicrosoftYaHei-, MicrosoftYaHei;
  205.                 font-weight: normal;
  206.                 color: #7C7C7C;
  207.             }
  208.         }
  209.     }
  210. }
  211. </style>

包含了调用接口以及数据绑定的

  1. <template>
  2.     <div class="feedback-container">
  3.         <div class="title-wapper">
  4.             <div class="title">我的反馈</div>
  5.         </div>
  6.         <div class="split-line">
  7.         </div>
  8.         <div>
  9.             <div class="feedback-content">
  10.                 <div class="feedback-item" v-for="(item, i) in feedbackList" :key="i">
  11.                     <div class="feedback-title">
  12.                         <div class="feedback-time">
  13.                             反馈时间: {{ changeDateFormat(item.createTime) }}
  14.                         </div>
  15.                         <div class="feedback-type">
  16.                             <span>问题类型：</span>
  17.                             <span v-if="item.feedbackType == 1" >系统问题</span>
  18.                             <span v-if="item.feedbackType == 2" >内容问题</span>
  19.                             <span v-if="item.feedbackType == 3">我要吐槽</span>
  20.                         </div>
  21.                     </div>
  22.                     <div class="feedback-message">
  23.                         反馈内容：{{ item.feedbackDescribe }}
  24.                     </div>
  25.                     <div class="feedback-descible">
  26.                         处理描述：{{ item.dealingOpinion }}
  27.                         <!-- <span>处理描述：</span> -->
  28.                         <!-- <span v-if="item.dealType == 0" style="color:#ffba00">{{item.dealingOpinion}}</span>
  29.                         <span v-if="item.dealType == 1" style="color:#13ce66">{{item.dealingOpinion}}</span>
  30.                         <span v-if="item.dealType == 2" style="color:#ff4949">{{item.dealingOpinion}}</span> -->
  31.                     </div>
  32.                     <div class="feedback-dealinfo">
  33.                         <div class="deal-result">
  34.                             <span>处理结果：</span>
  35.                             <!-- <span>已解决</span> -->
  36.                             <!-- <span v-if="item.dealType == 0" style="color:#ffba00">未处理</span>
  37.                             <span v-if="item.dealType == 1" style="color:#13ce66">已处理</span>
  38.                             <span v-if="item.dealType == 2" style="color:#ff4949">已驳回</span> -->
  39.                             <el-tag v-if="item.dealType == 0" type="warning">未处理</el-tag>
  40.                             <el-tag v-if="item.dealType == 1" type="success">已处理</el-tag>
  41.                             <el-tag v-if="item.dealType == 2" type="danger">已驳回</el-tag>
  42.                         </div>
  43.                         <div class="deal-time">
  44.                             处理时间：{{ changeDateFormat(item.dealTime) }}
  45.                         </div>
  46.                     </div>
  47.                 </div>
  48.             </div>
  49.         </div>
  50.     </div>
  51. </template>
  52. <script>
  53. export default {
  54.     // 组件名字
  55.     name: 'Myfeedback',
  56.     // 组件参数
  57.     props: {
  58.         percentage: {
  59.             type: Number,
  60.             default: 0
  61.         },
  62.         title: {
  63.             type: String,
  64.             default: ''
  65.         },
  66.     },
  67.     data() {
  68.         return {
  69.             feedbackList: []
  70.         }
  71.     },
  72.     mounted() {
  73.         this.saveFeedback()
  74.     },
  75.     // 组件方法
  76.     methods: {
  77.         changeDateFormat(jsondate) {
  78.             var date = new Date(jsondate).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
  79.             return date;
  80.         },
  81.         //获取反馈
  82.         saveFeedback() {
  83.             const _this = this
  84.             this.$http.get('/education/api/Feedback/GetFeedbackListByStudent').then(res => {
  85.                 console.log("-----------------------------------------------")
  86.                 console.log(res)
  87.                 _this.feedbackList = res.data.data
  88.             }).catch(e => {
  90.             }
  91.             )
  92.         }
  93.     }
  94. }
  95. </script>
  96. <style scoped="scoped" lang="scss">
  97. .feedback-container {
  99.     padding: 0 20px;
  101.     .title-wapper {
  102.         height: 60px;
  103.         // background-color: #ffabcd;
  104.         line-height: 60px;
  105.     }
  107.     .title {
  108.         font-family: MicrosoftYaHei-, MicrosoftYaHei;
  109.         font-weight: normal;
  110.         color: #333339;
  111.         font-size: 16px;
  112.     }
  114.     .split-line {
  115.         height: 1px;
  116.         background: #EAEEF0;
  117.         // width: 100%;
  118.         margin-left: -20px;
  119.         margin-right: -20px;
  120.     }
  122.     // .feedback-content {
  123.     // }
  125.     .feedback-item {
  127.         margin-top: 20px;
  129.         border: 1px solid #EAEEF0;
  130.         padding-bottom: 20px;
  132.         .feedback-title {
  133.             display: flex;
  134.             background: #EAEEF0;
  135.             height: 53px;
  136.             line-height: 53px;
  137.             padding: 0 20px;
  139.             .feedback-time {
  140.                 font-size: 14px;
  141.                 font-family: MicrosoftYaHei-, MicrosoftYaHei;
  142.                 font-weight: normal;
  143.                 color: #7C7C7C;
  144.             }
  146.             .feedback-type {
  147.                 font-size: 14px;
  148.                 margin-left: 43px;
  149.                 font-family: MicrosoftYaHei-, MicrosoftYaHei;
  150.                 font-weight: normal;
  151.                 color: #7C7C7C;
  152.             }
  154.         }
  156.         .feedback-message {
  157.             margin-top: 20px;
  158.             font-size: 14px;
  159.             font-family: MicrosoftYaHei-, MicrosoftYaHei;
  160.             // font-weight: normal;
  161.             font-weight: 500;
  162.             letter-spacing: 1px;
  163.             line-height: 23px;
  164.             color: #333339;
  165.             padding: 0 20px;
  166.         }
  168.         .feedback-descible {
  169.             margin-top: 20px;
  170.             font-size: 14px;
  171.             padding: 0 20px;
  172.             letter-spacing: 1px;
  173.             font-family: MicrosoftYaHei-, MicrosoftYaHei;
  174.             font-weight: normal;
  175.             color: #7C7C7C;
  176.         }
  178.         .feedback-dealinfo {
  179.             display: flex;
  180.             padding: 0 20px;
  181.             margin-top: 15px;
  183.             .deal-result {
  184.                 font-size: 14px;
  185.                 font-family: MicrosoftYaHei-, MicrosoftYaHei;
  186.                 font-weight: normal;
  187.             }
  189.             .deal-result span:first-child {
  190.                 color: #7C7C7C;
  191.             }
  193.             // .deal-result span:last-child {
  194.             //     color: #28B28B;
  195.             // }
  197.             .deal-time {
  198.                 margin-left: 50px;
  199.                 font-size: 14px;
  200.                 font-family: MicrosoftYaHei-, MicrosoftYaHei;
  201.                 font-weight: normal;
  202.                 // 如果前面处理结果使用了el-tag后高度保持一直
  203.                 line-height: 32px;
  204.                 color: #7C7C7C;
  205.             }
  206.         }
  207.     }
  208. }
  209. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue.js+Layer实现表格数据绑定与更新
一：使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去，在更新方法里边就可以直接...

vue.js 实现省市联动
HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

vue.js常见问题
一：花括号当做字符串显示的问题1：检查下绑定到vue.js的id是否重复，如果id重复了，就有可能存在这种问题，因为有可能把数...

vue.js常用指令
v-html可以把字符串当成一个html来渲染，而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...

干货！div滚动到一定位置就固定他。vue中实现一侧滚动到底部就固定
尊重原创：转载请注名出处div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后右...

vue.js常用指令，事件绑定等，vue过滤器解析状态过滤器多个参数。vue表格状态解析。vue解析类型，element ui解析类型，状态，el-tag
按照html的编码显示：v-html&lt;div class=&quot;font_info&quot; v-html=&quot;item.Content&quot;&gt;{{item.Content}}&l...

vue.js if用法
vue.js if可以做一些判断例如我们要把下面这个输出varvm=newVue({ el:&quot;#content&quot;, data:{ titles:[&quot;小明...

vue.js 学习日记第一章-安装vue开发环境
官网：https://cn.vuejs.org/v2/guide/ 这是一篇学习性文章，不定时更新，用来记录我学习vue.js的过程。 首先，是v...

vue.js 学习日记第二章-在vue中编写function及一些简单指令
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第一章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第三章-vue中的简单事件及事件修饰符
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第二章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第四章-vue中文本框数据获取与绑定及computed计算属性
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第三章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第五章-v-if和v-for指令的使用方式
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第四章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第六章-vue组件初步学习
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第五章： http://www.tnblog.net/18323015640/article/details/2...

vue.js学习日记第七章-搭建脚手架
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第六章： http://www.tnblog.net/18323015640/article/details/2...

vue实现好友选中效果
逛过vue官网肯定会发现一个有趣的指令“v-for”，相比与以前拼接html代码确实要上档次一点，而且减少了工作量，先看一波效...

js时间格式化vue.js时间格式化，带T 时间格式化

也可以借助moment库， 参考：https://www.tnblog.net/aojiancc2/article/details/8079moment库有点大，推荐可以使用day.js...