صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
zouling
/
service_card
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
درخت: b1be6824b9
شاخه‌ها تگ‌ها
service_card
/
qianshancard_wx
/
pages
/
index
/
index.vue

index.vue 7.1 KB
تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 
  1. <template>
    2. 

  2.     <view class="home" >
    3. 

  3. 		<!-- 头部 -->
    4. 

  4. 		<navbar :back="false" title="首页" :bgcolor="backgroundColor" color="#fff" fixed zIndex="1010" :center="true"	:custom='true' @getTop="getTop"/>
    5. 

  5. 		<image :src="bgimg" class="homebg"></image>
    6. 

  6. 		<view class="hometop">
    7. 

  7. 			<swiper class="swiper" circular :indicator-active-color="activecolor" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
    8. 

  8. 				:duration="duration">
    9. 

  9. 				<swiper-item>
    10. 

  10. 					<image :src="swpimga" class="swiperimg"></image>
    11. 

  11. 				</swiper-item>
    12. 

  12. 				<swiper-item>
    13. 

  13. 					<image :src="swpimga" class="swiperimg"></image>
    14. 

  14. 				</swiper-item>
    15. 

  15. 				<swiper-item>
    16. 

  16. 					<image :src="swpimga" class="swiperimg"></image>
    17. 

  17. 				</swiper-item>
    18. 

  18. 			</swiper>
    19. 

  19. 		</view>
    20. 

  20. 		<view class="htlists">
    21. 

  21. 			<view class="flexc flexdc w33">
    22. 

  22. 				<image :src="topimga" class="htlisti"></image>
    23. 

  23. 				<view class="f13 c0 ">招商政策</view>
    24. 

  24. 			</view>
    25. 

  25. 			<view class="flexc flexdc w33">
    26. 

  26. 				<image :src="topimgb" class="htlisti"></image>
    27. 

  27. 				<view class="f13 c0 ">使用指南</view>
    28. 

  28. 			</view>
    29. 

  29. 			<view class="flexc flexdc w33">
    30. 

  30. 				<image :src="topimgc" class="htlisti"></image>
    31. 

  31. 				<view class="f13 c0 ">权益内容</view>
    32. 

  32. 			</view>
    33. 

  33. 		</view>
    34. 

  34. 		<view class="hgbox">
    35. 

  35. 			<view class="flex1 ">
    36. 

  36. 				<view class="hgboxtit">权益管理</view>
    37. 

  37. 				<view class="hgboxtxt">可对拥有权益进行人员分配</view>
    38. 

  38. 			</view>
    39. 

  39. 			<view class="flex0 hgboxrtit">去管理</view>
    40. 

  40. 		</view>
    41. 

  41. 		<view class="hmlists">
    42. 

  42. 			<view class="hmtop">
    43. 

  43. 				<view class="hmtoptit">我的权益</view>
    44. 

  44. 				<view class="hmtoptxt">
    45. 

  45. 					权益具体说明
    46. 

  46. 					<image :src="rimg"></image>
    47. 

  47. 				</view>
    48. 

  48. 			</view>
    49. 

  49. 			<view class="hmlist">
    50. 

  50. 				<view class="hmlistt">
    51. 

  51. 					<view class="hmlista">
    52. 

  52. 						<image :src="mbgimg" class="hmlistai"></image>
    53. 

  53. 						<view class="hmlistat">投资服务</view>
    54. 

  54. 					</view>
    55. 

  55. 					<view class="hmlistr">可享用</view>
    56. 

  56. 				</view>
    57. 

  57. 				<view class="hmlistb">
    58. 

  58. 					<view class="flex1 mbt5">
    59. 

  59. 						<view class="f13 c0 lh18">在我市投资过程中问题可直接向与乡镇反馈</view>
    60. 

  60. 						<view class="f13 c0 lh18">市政府政务大厅相关业务实行代办服务</view>
    61. 

  61. 						<view class="hmline"></view>
    62. 

  62. 					</view>
    63. 

  63. 					<image :src="lista" class="hmlistbr"></image>
    64. 

  64. 				</view>
    65. 

  65. 			</view>
    66. 

  66. 			<view class="hmlist">
    67. 

  67. 				<view class="hmlistt">
    68. 

  68. 					<view class="hmlista">
    69. 

  69. 						<image :src="mbgimg" class="hmlistai"></image>
    70. 

  70. 						<view class="hmlistat">子女入学</view>
    71. 

  71. 					</view>
    72. 

  72. 					<view class="hmlistr">可享用</view>
    73. 

  73. 				</view>
    74. 

  74. 				<view class="hmlistb">
    75. 

  75. 					<view class="flex1 mbt5">
    76. 

  76. 						<view class="f13 c0 lh18">优先就近安排子女义务教育阶段学校就读</view>
    77. 

  77. 						<view class="f13 c0 lh18">优先安排子女转入城区省示范高中就读</view>
    78. 

  78. 						<view class="hmline"></view> 
    79. 

  79. 					</view>
    80. 

  80. 					<image :src="lista" class="hmlistbr"></image>
    81. 

  81. 				</view>
    82. 

  82. 			</view>
    83. 

  83. 			<view class="hmlist">
    84. 

  84. 				<view class="hmlistt">
    85. 

  85. 					<view class="hmlista">
    86. 

  86. 						<image :src="mbgimg" class="hmlistai"></image>
    87. 

  87. 						<view class="hmlistat">医疗保障</view>
    88. 

  88. 					</view>
    89. 

  89. 					<view class="hmlistr">可享用</view>
    90. 

  90. 				</view>
    91. 

  91. 				<view class="hmlistb">
    92. 

  92. 					<view class="flex1 mbt5">
    93. 

  93. 						<view class="f13 c0 lh18">每年享受医院的免费健康体检</view>
    94. 

  94. 						<view class="f13 c0 lh18">提供免费核酸检测并开通绿色优先通道</view>
    95. 

  95. 						<view class="hmline"></view>
    96. 

  96. 					</view>
    97. 

  97. 					<image :src="lista" class="hmlistbr"></image>
    98. 

  98. 				</view>
    99. 

  99. 			</view>
    100. 

  100. 		</view>
    101. 

  101.     <!-- 底部 导航栏  currentPage 当前页面ID -->
    102. 

  102.         <tab-bar :currentPage="0"></tab-bar>
    103. 

  103.     </view>
    104. 

  104. </template>
    105. 

  105. 

  106. <script>
    107. 

  107. 	import url from "@/util/url";
    108. 

  108. 	let {host} = url
    109. 

  109.     //导入组件
    110. 

  110.     import tabBar from '@/components/tabbar/tabbar.vue'
    111. 

  111.     export default {
    112. 

  112.         data() {
    113. 

  113.             return {
    114. 

  114. 				padtop:this.$http._GET.customBarH||0,
    115. 

  115. 				backgroundColor: 'transparent',
    116. 

  116. 				bgimg:require('@/static/image/bg.png'),
    117. 

  117. 				swpimga:require("@/static/image/swipera.png"),
    118. 

  118. 				indicatorDots: true,
    119. 

  119. 				autoplay: false,
    120. 

  120. 				activecolor:'#ffffff',
    121. 

  121. 				interval: 2000,
    122. 

  122. 				duration: 500,
    123. 

  123. 				topimga:require("@/static/image/topa.png"),
    124. 

  124. 				topimgb:require("@/static/image/topb.png"),
    125. 

  125. 				topimgc:require("@/static/image/topc.png"),
    126. 

  126. 				rimg:require("@/static/image/rimg.png"),
    127. 

  127. 				mbgimg:require("@/static/image/mbg.png"),
    128. 

  128. 				lista:require("@/static/image/lista.png"),
    129. 

  129.             };
    130. 

  130.         },
    131. 

  131.         components:{
    132. 

  132.             tabBar
    133. 

  133.         },
    134. 

  134.         methods: {
    135. 

  135. 			getTop(e){
    136. 

  136. 				this.padtop=e;
    137. 

  137. 			},
    138. 

  138. 			// 监听滚动
    139. 

  139. 			
    140. 

  140. 		},
    141. 

  141. 		onPageScroll(res) {
    142. 

  142. 			var scrolltop=res.scrollTop;
    143. 

  143. 			if(scrolltop>0){
    144. 

  144. 				this.backgroundColor='linear-gradient(60deg, #6A6BF1, #CB4BFA)'
    145. 

  145. 			}else{
    146. 

  146. 				this.backgroundColor='transparent'
    147. 

  147. 			}
    148. 

  148. 		 },
    149. 

  149.     };
    150. 

  150. </script>
    151. 

  151. <style scoped lang="scss">
    152. 

  152. 

  153. 	.home{min-height: 100vh;background: #FFFFFF;overflow: auto;
    154. 

  154. 		.homebg{width: 100%;height: 376rpx;}
    155. 

  155. 		.hometop{margin-top:-208rpx;}
    156. 

  156. 		.swiper{height: 260rpx;margin: 0 34rpx 28rpx;
    157. 

  157. 			.swiperimg{width: 100%;height: 100%;}
    158. 

  158. 		}
    159. 

  159. 		.htlists{margin-bottom: 20rpx;display: flex;padding: 0 10rpx 32rpx;
    160. 

  160. 			.htlisti{width: 146rpx;height: 146rpx;margin-bottom: 12rpx;}
    161. 

  161. 		}
    162. 

  162. 		.hgbox{margin:0rpx 32rpx 16rpx;background: #1B1B1D;border-radius: 14rpx;padding: 20rpx 20rpx 20rpx 16rpx;display: flex;align-items: center;justify-content: space-between;min-height: 128rpx;box-sizing: border-box;
    163. 

  163. 			.hgboxtit{font-size: 34rpx;font-weight: bold;color: #C1A76B;margin-bottom: 8rpx;}
    164. 

  164. 			.hgboxtxt{font-size: 24rpx;color: #B7AC93;}
    165. 

  165. 			.hgboxrtit{width: 136rpx;height: 48rpx;background: linear-gradient(-89deg, #C6A36D, #E8D18A);border-radius: 24rpx;font-size: 26rpx;color: #FFFFFF;text-align: center;line-height: 48rpx;}
    166. 

  166. 		
    167. 

  167. 		}
    168. 

  168. 	}
    169. 

  169. 		
    170. 

  170. 		
    171. 

  171. 		.hmlists{padding:0 32rpx;
    172. 

  172. 			.hmtop{padding: 28rpx 0;display: flex;align-items: center;justify-content: space-between;
    173. 

  173. 				.hmtoptit{font-size: 34rpx;font-weight: bold;color: #3F3F3F;position: relative;line-height: 48rpx;
    174. 

  174. 				&:after{width:38rpx;height: 6rpx;background: #B461F8;border-radius:2rpx;position: absolute;content: "";left: 50%;margin-left: -19rpx;bottom: -12rpx;border-radius: 2rpx;}
    175. 

  175. 				}
    176. 

  176. 				.hmtoptxt{
    177. 

  177. 					font-size: 26rpx;color: #666666;
    178. 

  178. 					display: flex;align-items: center;
    179. 

  179. 					image{width: 16rpx;height: 28rpx;margin-left: 18rpx;}
    180. 

  180. 				}
    181. 

  181. 			}
    182. 

  182. 			.hmlist{width: 100%;min-height: 188rpx;background: #F4F4F4;
    183. 

  183. border-radius: 14rpx;padding: 0 22rpx 14rpx 14rpx;box-sizing: border-box;margin-bottom: 20rpx;
    184. 

  184. 				.hmlistt{
    185. 

  185. 					display: flex;justify-content: space-between;margin-bottom: 8rpx;
    186. 

  186. 					.hmlista{position: relative;width: 112rpx;height: 48rpx;
    187. 

  187. 						.hmlistai{width: 112rpx;height: 48rpx;}
    188. 

  188. 						.hmlistat{font-size: 22rpx;font-weight: bold;color: #FFFFFF;line-height: 40rpx;text-align: center;position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
    189. 

  189. 						
    190. 

  190. 					}
    191. 

  191. 					.hmlistr{min-width: 70rpx;height: 26rpx;background: rgba(124, 198, 35, 0.3);border-radius: 12rpx;text-align: center;line-height: 26rpx;font-size: 16rpx;color: #21C050;padding: 0 10rpx;margin: 10rpx 10rpx 0 0 ;}
    192. 

  192. 				}
    193. 

  193. 				.hmlistb{
    194. 

  194. 					display: flex;justify-content: space-between;
    195. 

  195. 					.hmlistbr{margin-left: 16rpx;width: 140rpx;height: 102rpx;flex: 0 0 auto;}
    196. 

  196. 					.hmline{width: 22rpx;height: 2rpx;background: #C5C5C5;margin-top: 16rpx;}
    197. 

  197. 				}	
    198. 

  198. }
    199. 

  199. 		}
    200. 

  200. </style>
    201.