1.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <div class="listNewsTitle" v-if="skinId==1">
  3. 本网招聘
  4. </div>
  5. <ul class="list">
  6. <div class="listNewsTitle_skin2" v-if="skinId==2">
  7. <span>本网招聘</span>
  8. </div>
  9. <div v-if="newsList.length>0">
  10. <li v-for="(item, index) in newsList" :key="index">
  11. <NuxtLink :to="{ path: `zhaopin/${item.id}.html` }" :title="item.con_title">
  12. {{getTitleLength(item.con_title,50)}}
  13. <span>{{ getTime(item.updated_at,'month',1) }}</span>
  14. </NuxtLink>
  15. </li>
  16. </div>
  17. <div v-else-if="newsList.con_title">
  18. <li>
  19. <NuxtLink :to="{ path: `zhaopin/${newsList.id}.html` }" :title="newsList.con_title">
  20. {{newsList.con_title}}
  21. <span>{{ getTime(newsList.updated_at,'month',1) }}</span>
  22. </NuxtLink>
  23. </li>
  24. </div>
  25. </ul>
  26. </template>
  27. <script setup>
  28. const props = defineProps({
  29. skinId: Number,//皮肤id
  30. newsList: Array,//模板数据
  31. });
  32. </script>
  33. <style lang="less" scoped>
  34. //样式1
  35. .listNewsTitle {
  36. font-size: 22px;
  37. font-weight: bold;
  38. height: 44px;
  39. border-bottom: 2px solid #004564;
  40. color: #004564;
  41. box-sizing: border-box;
  42. margin-top: 28px;
  43. margin-bottom: 30px;
  44. }
  45. //样式2
  46. .listNewsTitle_skin2 {
  47. font-size: 22px;
  48. font-weight: bold;
  49. height: 44px;
  50. border-bottom: 2px solid #A91B33;
  51. color: #A91B33;
  52. box-sizing: border-box;
  53. margin-top: 28px;
  54. margin-bottom: 30px;
  55. span {
  56. border-left: 3px solid #A91B33;
  57. padding-left: 12px;
  58. display: inline-block;
  59. height: 25px;
  60. line-height: 25px;
  61. }
  62. }
  63. //列表
  64. .list {
  65. margin-bottom: 30px;
  66. padding-bottom: 10px;
  67. margin-top: 10px;
  68. li {
  69. width: 100%;
  70. height: 60px;
  71. white-space: nowrap;
  72. overflow: hidden;
  73. text-overflow: ellipsis;
  74. line-height: 60px;
  75. &:nth-child(1),&:nth-child(6),&:nth-child(11),&:nth-child(16) {
  76. font-size: 18px;
  77. font-weight: bold;
  78. }
  79. &:nth-child(5),&:nth-child(10),&:nth-child(15),&:nth-child(20) {
  80. border-bottom: 1px solid #D9D9D9;
  81. margin-bottom: 30px;
  82. }
  83. &:nth-child(20){
  84. margin-bottom: 0;
  85. }
  86. a {
  87. width: 100%;
  88. display: block;
  89. height: 26px;
  90. cursor: pointer;
  91. font-family: Microsoft YaHei, Microsoft YaHei;
  92. font-size: 18px;
  93. color: #333333;
  94. line-height: 26px;
  95. text-align: left;
  96. font-style: normal;
  97. text-transform: none;
  98. span {
  99. float: right;
  100. display: inline-block;
  101. width: 60px;
  102. height: 24px;
  103. line-height: 24px;
  104. }
  105. }
  106. }
  107. }
  108. </style>