top - 副本.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. <template>
  2. <view class="top-box" :style="{ 'height': swiperHeight + 'rpx'}">
  3. <view :class="['nav-top', scrollStyle?'scroll-style':'' , pattern === 1 ? 'zw-nav-top' : 'sh-nav-top']"
  4. :style="navScrollStyle">
  5. <view class="status-bar" :style="{'height': statusBarHeight + 'px'}" />
  6. <view class="status-title">
  7. <view class="title-identity-box">
  8. <view class="title-identity" @click.stop="toQY()">
  9. <text class="iconfont_yige identity-icon">&#xe610;</text>
  10. <text>个人</text>
  11. </view>
  12. </view>
  13. <view class="title-name">
  14. <text :class="{'active-title-name':pattern === 1}" @click.stop="home.init(1)">政务</text>
  15. <text :class="{'active-title-name':pattern === 2}" @click.stop="home.init(2)">生活</text>
  16. </view>
  17. <view class="title-btn">
  18. <text class="iconfont_yige title-btn-item" @click.stop="openCustomerCenter()">&#xe60e;</text>
  19. <text class="iconfont_yige title-btn-item" style="font-size: 48rpx;"
  20. @click.stop="home.init(3)">&#xe6bd;</text>
  21. </view>
  22. </view>
  23. <view class="status-search">
  24. <view class="weather-box" @click.stop="openWeather()">
  25. <template v-if="weatherInfo">
  26. <image class="weather-img iconfont_yige" :src="weatherInfo.icon" mode="aspectFit"></image>
  27. <!-- <text class="weather-icon iconfont_yige">&#xe62a;</text> -->
  28. <text class="weather-num" v-if="weatherInfo.temperature">{{weatherInfo.temperature}}
  29. <text>°C</text> </text>
  30. </template>
  31. </view>
  32. <view class="search-box" @click.stop="onSearch()">
  33. <text class="search-icon iconfont_yige">&#xe653;</text>
  34. <text class="search-text iconfont_yige">请输入检索关键字</text>
  35. </view>
  36. </view>
  37. </view>
  38. <!-- <view :style=" {'width':'100%','height': statusBarHeight + 'px' }"></view> -->
  39. <view class="shortcut-box" :style="{ 'paddingTop': statusBarHeight + 'px'}">
  40. <view class="status-placeholder"></view>
  41. <view class="shortcut-content">
  42. <u-row gutter="20">
  43. <u-col span="3">
  44. <view class="shortcut-item" @click.stop="openScanCode()">
  45. <text class="iconfont_yige iconfont-icon">&#xe8b5;</text>
  46. <text class="zw-one-row iconfont-name">扫一扫</text>
  47. </view>
  48. </u-col>
  49. <block v-if="topKongLimList.length > 0">
  50. <u-col span="3" v-for="item in topKongLimList" :key="item.id">
  51. <view class="shortcut-item" @click.stop="$openPage(item)">
  52. <!-- <text class="iconfont_yige iconfont-icon">&#xf71e;</text> -->
  53. <image class="icon_img" :src="$getImgPath(item.icon)" mode="aspectFill"></image>
  54. <text class="zw-one-row iconfont-name">{{item.name}}</text>
  55. </view>
  56. </u-col>
  57. </block>
  58. </u-row>
  59. </view>
  60. </view>
  61. <!-- <view class="swiper-boxs" :style="{ 'height': swiperHeight + 'rpx'}">
  62. <view class="swiper-box">
  63. <zw-swiper :height="swiperHeight" :keyword=" pattern === 1 ? $keys.ZW_BANNER : $keys.SH_BANNER" />
  64. </view>
  65. </view> -->
  66. <view class="swiper-content" :style="{ 'height': swiperHeight + 'rpx'}">
  67. <zw-swiper ref="swiperRef" :height="swiperHeight"
  68. :keyword="pattern === 1 ? $keys.ZW_BANNER : $keys.SH_BANNER"
  69. :StorageKey="pattern === 1 ? $keys.sy_zw_BANNER : $keys.sy_sh_BANNER" />
  70. </view>
  71. </view>
  72. </template>
  73. <script>
  74. import Mixin from "./Mixin.js";
  75. import {
  76. openSearch
  77. } from "../../government/conmon.js"
  78. import {
  79. getPhotograph
  80. } from "@/utils/tool.js"
  81. export default {
  82. props: {
  83. pattern: {
  84. type: Number,
  85. default: 1
  86. },
  87. swiperHeight: {
  88. type: Number,
  89. default: 720
  90. },
  91. scrollTop: {
  92. type: Number,
  93. default: 0
  94. },
  95. topKongLimList: {
  96. type: Array,
  97. default: () => []
  98. },
  99. toQyKongLimList: {
  100. type: Array,
  101. default: () => []
  102. },
  103. // 天气
  104. weatherInfo: {
  105. type: Object,
  106. default: null
  107. },
  108. },
  109. mixins: [Mixin],
  110. inject: ["home"],
  111. data() {
  112. return {
  113. scrollStyle: false,
  114. navScrollStyle: {},
  115. keyword: '',
  116. }
  117. },
  118. methods: {
  119. openWeather() {
  120. this.$skipWeb('https://m.weather.com.cn/mweather/101200901.shtml', '宜昌天气')
  121. },
  122. init() {
  123. this.$refs.swiperRef.init()
  124. },
  125. openScanCode() {
  126. // getPhotograph();
  127. // 允许从相机和相册扫码
  128. uni.scanCode({
  129. success: function(res) {
  130. console.log('条码类型:' + res.scanType);
  131. console.log('条码内容:' + res.result);
  132. }
  133. });
  134. },
  135. onSearch() {
  136. openSearch()
  137. },
  138. openCustomerCenter() {
  139. uni.navigateTo({
  140. url: '/pages/government/customer-center'
  141. });
  142. },
  143. toQY() {
  144. this.$openPage(this.toQyKongLimList[0])
  145. }
  146. },
  147. watch: {
  148. scrollTop: {
  149. handler: function(newNum, oldNum) {
  150. const Num = Number(newNum) || 0
  151. this.scrollStyle = Num > 140 ? true : false;
  152. if (Num < 15) {
  153. this.navScrollStyle = {}
  154. }
  155. if (Num >= 15 && Num < 70) {
  156. const op = Num / 70;
  157. this.navScrollStyle = {
  158. opacity: 1 - op,
  159. }
  160. }
  161. if (Num >= 70 && Num < 140) {
  162. const op = (Num - 70) / 70;
  163. this.navScrollStyle = {
  164. backgroundColor: `rgba(255, 255, 255, ${op})`,
  165. opacity: op,
  166. }
  167. }
  168. if (Num >= 140) {
  169. this.navScrollStyle = {
  170. backgroundColor: `rgba(255, 255, 255 ,1)`,
  171. }
  172. }
  173. },
  174. immediate: true
  175. },
  176. }
  177. }
  178. </script>
  179. <style lang="scss" scoped>
  180. .top-box {
  181. width: 100%;
  182. overflow: hidden;
  183. position: relative;
  184. .swiper-content {
  185. position: absolute;
  186. left: 0;
  187. top: 0;
  188. right: 0;
  189. }
  190. .swiper-boxs {
  191. overflow: hidden;
  192. width: 200%;
  193. position: absolute;
  194. left: -50%;
  195. /* (width - 100%)/ 2 */
  196. top: 0;
  197. border-radius: 0 0 50% 50%;
  198. .swiper-box {
  199. margin: 0 auto;
  200. width: 750rpx;
  201. height: 100%;
  202. overflow: hidden;
  203. }
  204. }
  205. .nav-top {
  206. position: fixed;
  207. z-index: 2;
  208. left: 0;
  209. top: 0;
  210. right: 0;
  211. padding: 0 $zw-padding;
  212. .status-title {
  213. width: 100%;
  214. height: 113rpx;
  215. padding-top: 27rpx;
  216. display: flex;
  217. justify-content: space-between;
  218. align-items: stretch;
  219. .title-identity-box,
  220. .title-btn {
  221. width: 200rpx;
  222. display: flex;
  223. align-items: center;
  224. }
  225. // 86rpx
  226. .title-identity-box {
  227. .title-identity {
  228. width: 141rpx;
  229. height: 57rpx;
  230. display: flex;
  231. justify-content: center;
  232. align-items: center;
  233. border-radius: 30rpx;
  234. .identity-icon {
  235. font-size: 34rpx;
  236. }
  237. text+text {
  238. font-size: 26rpx;
  239. font-weight: 400;
  240. padding-left: 14rpx;
  241. }
  242. }
  243. }
  244. .title-btn {
  245. display: flex;
  246. justify-content: flex-end;
  247. align-items: center;
  248. .title-btn-item {
  249. font-size: 40rpx;
  250. &:first-child {
  251. margin-right: 20rpx;
  252. }
  253. }
  254. }
  255. .title-name {
  256. flex: 1;
  257. display: flex;
  258. align-items: stretch;
  259. justify-content: center;
  260. text {
  261. display: flex;
  262. align-items: center;
  263. &+text {
  264. margin-left: 60rpx;
  265. }
  266. font-size: 36rpx;
  267. font-family: PingFang SC,
  268. PingFang SC-Medium;
  269. font-weight: 500;
  270. }
  271. .active-title-name {
  272. font-family: PingFang SC, PingFang SC-Bold;
  273. font-weight: 700;
  274. position: relative;
  275. &::before {
  276. content: '';
  277. position: absolute;
  278. left: 0;
  279. bottom: 0;
  280. width: 100%;
  281. height: 8rpx;
  282. border-radius: 4rpx;
  283. }
  284. }
  285. }
  286. }
  287. .status-search {
  288. width: 100%;
  289. height: 110rpx;
  290. padding: 20rpx 0;
  291. display: flex;
  292. justify-content: space-between;
  293. align-items: stretch;
  294. .weather-box {
  295. width: 70rpx;
  296. height: 100%;
  297. display: flex;
  298. flex-direction: column;
  299. justify-content: center;
  300. align-items: center;
  301. .weather-img {
  302. width: 70rpx;
  303. height: 70rpx;
  304. }
  305. .weather-icon {}
  306. .weather-num {
  307. // padding-top: 5rpx;
  308. font-size: 22rpx;
  309. line-height: 1;
  310. font-family: PingFang SC, PingFang SC-Bold;
  311. font-weight: 700;
  312. // text-align: left;
  313. text {
  314. font-weight: 400;
  315. transform: scale(0.8);
  316. }
  317. }
  318. }
  319. .search-box {
  320. flex: 1;
  321. height: 100%;
  322. border-radius: 35rpx;
  323. overflow: hidden;
  324. padding: 0 20rpx;
  325. display: flex;
  326. align-items: center;
  327. .search-icon {
  328. font-size: 30rpx;
  329. }
  330. .search-text {
  331. font-size: 27rpx;
  332. padding-left: 3px;
  333. }
  334. }
  335. }
  336. }
  337. .zw-nav-top,
  338. .sh-nav-top {
  339. .title-identity-box,
  340. .title-btn,
  341. .weather-icon,
  342. .weather-num {
  343. color: #fff;
  344. }
  345. .title-identity {
  346. background-color: rgba(255, 255, 255, 0.3);
  347. // box-shadow: 0px 4px 6px 0px rgba(3, 148, 180, 0.30);
  348. }
  349. .title-name {
  350. .active-title-name {
  351. color: #fff;
  352. &::before {
  353. background-color: #fff;
  354. }
  355. }
  356. }
  357. .search-box {
  358. background: rgba(255, 255, 255, 0.30);
  359. border: 1rpx solid rgba(255, 255, 255, 0.36);
  360. color: #fff;
  361. .search-text {
  362. color: rgba(255, 255, 255, 0.50);
  363. }
  364. }
  365. }
  366. .zw-nav-top {
  367. .title-name {
  368. text {
  369. color: #D5F1F6;
  370. }
  371. }
  372. }
  373. .sh-nav-top {
  374. .title-name {
  375. text {
  376. color: #FFE6D6;
  377. }
  378. }
  379. }
  380. .scroll-style {
  381. .weather-icon {
  382. color: #FABB00;
  383. }
  384. .title-identity-box,
  385. .title-btn,
  386. .weather-num,
  387. .title-name>text {
  388. color: #000 !important;
  389. }
  390. .active-title-name::before {
  391. background-color: #000 !important;
  392. }
  393. .title-identity {
  394. // background-color: rgba(255, 255, 255, 0.3);
  395. border: 1rpx solid #ccc;
  396. // box-shadow: 0px 4px 6px 0px rgba(3, 148, 180, 0.30);
  397. }
  398. .search-box {
  399. border: 1rpx solid #ccc;
  400. color: #c1c1c1;
  401. .search-text {
  402. color: #c1c1c1;
  403. }
  404. }
  405. }
  406. .status-placeholder {
  407. width: 100%;
  408. // height: calc(113rpx + 110rpx);
  409. height: 223rpx;
  410. // height: 120px;
  411. }
  412. .shortcut-box {
  413. position: relative;
  414. left: 0;
  415. right: 0;
  416. top: 0;
  417. z-index: 1;
  418. .shortcut-content {
  419. width: 100%;
  420. padding: 35rpx $zw-padding 0;
  421. .shortcut-item {
  422. display: flex;
  423. flex-direction: column;
  424. justify-content: center;
  425. align-items: center;
  426. .iconfont-icon {
  427. font-size: 50rpx;
  428. font-weight: bold;
  429. color: #fff;
  430. }
  431. .icon_img {
  432. width: 50rpx;
  433. height: 50rpx;
  434. vertical-align: middle;
  435. }
  436. .iconfont-name {
  437. width: 100%;
  438. padding-top: 15rpx;
  439. font-size: 28rpx;
  440. font-weight: 400;
  441. text-align: center;
  442. color: #fafafa;
  443. }
  444. }
  445. }
  446. }
  447. }
  448. </style>