policy1.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>政策服务</title>
  6. <meta name="renderer" content="webkit">
  7. <meta name="viewport"
  8. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
  9. <meta name="apple-mobile-web-app-capable" content="yes"/>
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  11. <link rel="stylesheet" href="__MCSS__/vant4.6.min.css">
  12. <link rel="stylesheet" href="__MCSS__/style.css">
  13. <script src="__COMMON_JS__/vue3.3.4.min.js"></script>
  14. <script src="__MJS__/vant4.6.min.js"></script>
  15. <script src="__COMMON_JS__/axios1.4.min.js"></script>
  16. <script>
  17. const baseUrl = "{:url('/')}";
  18. </script>
  19. <script src="__MJS__/axios_instance.js"></script>
  20. <style>
  21. .policy-item {
  22. width: 90%;
  23. border: 1px solid #eee;
  24. margin: 20px auto 0 auto;
  25. padding: 10px 10px;
  26. border-radius: 10px;
  27. box-shadow: 0 0 10px #ccc;
  28. box-sizing: border-box;
  29. }
  30. .policy-header {
  31. font-size: 15px;
  32. font-weight: bold;
  33. padding-bottom: 10px;
  34. }
  35. .policy-footer {
  36. font-size: 12px;
  37. display: flex;
  38. color: #8C8C8C;
  39. border-top: 1px solid #ccc;
  40. padding-top: 10px;
  41. }
  42. .policy-footer-left {
  43. white-space: nowrap;
  44. overflow: hidden;
  45. text-overflow: ellipsis;
  46. width: calc(100% - 110px);
  47. }
  48. .policy-footer-right {
  49. margin-left: auto;
  50. width: 100px;
  51. text-align: right;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div id="app">
  57. <van-nav-bar
  58. class="nav-theme"
  59. :fixed="true"
  60. :placeholder="true"
  61. left-text="返回"
  62. left-arrow
  63. @click-left="onBack"
  64. >
  65. <template #title>
  66. <span class="text-white">政策服务</span>
  67. </template>
  68. </van-nav-bar>
  69. <div class="policy-list">
  70. <div class="policy-item" v-for="item in list" @click="toDetail(item.id)">
  71. <div class="policy-header">
  72. <van-image src="__MIMAGES__/icon_policy.png" height="14px" width="13px"></van-image>
  73. {{item.title}}
  74. </div>
  75. <div class="policy-footer">
  76. <div class="policy-footer-left">{{item.government}}</div>
  77. <div class="policy-footer-right">{{item.publish_time}}</div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <script>
  83. function v_setup() {
  84. let base = {};
  85. base.list = {$list};
  86. base.toDetail = (id) => {
  87. location.href = "{:url('jfm/policyDetail1')}?id=" + id;
  88. };
  89. base.onBack = () => {
  90. history.back();
  91. };
  92. return base;
  93. }
  94. const vue3 = {
  95. setup() {
  96. return v_setup();
  97. }
  98. };
  99. const app = Vue.createApp(vue3)
  100. .use(vant)
  101. .use(vant.Lazyload);
  102. app.mount('#app');
  103. </script>
  104. </body>
  105. </html>