LvShanXiang.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
  1. <template>
  2. <div class="LvShanXiang" @click="qita">
  3. <hy-header :navTag="0"></hy-header>
  4. <div class="warp">
  5. <div class="left">
  6. <div class="left1">
  7. <E-Left1 style="height: 100%"></E-Left1>
  8. </div>
  9. <div class="left2">
  10. <E-Left2 style="height: 100%"></E-Left2>
  11. </div>
  12. <div class="left3">
  13. <E-Left3 style="height: 100%"></E-Left3>
  14. </div>
  15. </div>
  16. <div class="middle">
  17. <section class="section">
  18. <div class="warp">
  19. <div class="item">
  20. <div>
  21. <span class="title">当月存栏量:</span>
  22. <span class="num">10534</span>
  23. <span class="unit">只</span>
  24. </div>
  25. </div>
  26. <div class="item">
  27. <div>
  28. <span class="title">当月出栏量:</span>
  29. <span class="num">1534</span>
  30. <span class="unit">只</span>
  31. </div>
  32. </div>
  33. <div class="item">
  34. <div>
  35. <span class="title">月种羊出栏:</span>
  36. <span class="num">2380</span>
  37. <span class="unit">只</span>
  38. </div>
  39. </div>
  40. </div>
  41. <div class="warp">
  42. <div class="item">
  43. <div>
  44. <span class="title">当前肉羊价:</span>
  45. <span class="num">33</span>
  46. <span class="unit">元/kg</span>
  47. </div>
  48. </div>
  49. <div class="item">
  50. <div>
  51. <span class="title">当前种羊价:</span>
  52. <span class="num">53</span>
  53. <span class="unit">元/kg</span>
  54. </div>
  55. </div>
  56. <div class="item">
  57. <div>
  58. <span class="title">当前羊粪价:</span>
  59. <span class="num">0.8</span>
  60. <span class="unit">元/kg</span>
  61. </div>
  62. </div>
  63. </div>
  64. </section>
  65. <footer class="footer" v-if="isShowMain">
  66. <main class="inputWrap">
  67. <input
  68. type="text"
  69. class="input"
  70. v-model="searchStr"
  71. placeholder="族谱溯源"
  72. />
  73. <i class="icon_search" @click.stop="search"></i>
  74. </main>
  75. <img class="bg_map" src="../../assets/u922.png" />
  76. <!-- <div class="point p1" @click.stop="clickPoint('dr')">
  77. <i class="warp">
  78. <i class="middle">
  79. <i class="center"></i>
  80. </i>
  81. </i>
  82. </div>
  83. <div class="point p2" @click.stop="clickPoint('ys')">
  84. <i class="warp">
  85. <i class="middle">
  86. <i class="center"></i>
  87. </i>
  88. </i>
  89. </div> -->
  90. <div class="icon_pasture_1" @click.stop="clickPoint('dr')">
  91. <img src="../../assets/icon_pasture.png">
  92. <h3>长兴德睿生态农业开发有限公司</h3>
  93. </div>
  94. <div class="icon_pasture_2" @click.stop="clickPoint('ys')">
  95. <img src="../../assets/icon_pasture.png">
  96. <h3>长兴永盛牧业有限公司</h3>
  97. </div>
  98. <!-- <div class="point p3">
  99. <i class="warp">
  100. <i class="middle">
  101. <i class="center"></i>
  102. </i>
  103. </i>
  104. </div> -->
  105. </footer>
  106. <footer
  107. class="footer_2"
  108. v-show="!isShowMain"
  109. >
  110. <!-- @click.stop="isShowMain = false" -->
  111. <h1>族谱溯源</h1>
  112. <article class="tree">
  113. <div class="self">021543</div>
  114. <div class="f">父:025464</div>
  115. <div class="m">母:01348</div>
  116. <div class="ff">父父:045645</div>
  117. <div class="fm">父母:046595</div>
  118. <div class="mf">母父:084561</div>
  119. <div class="mm">母母:046585</div>
  120. </article>
  121. </footer>
  122. </div>
  123. <div class="right">
  124. <div class="right1">
  125. <E-Right1 style="height: 100%"></E-Right1>
  126. </div>
  127. <div class="right2">
  128. <E-Right2 style="height: 100%"></E-Right2>
  129. </div>
  130. <div class="right3">
  131. <E-Right3 style="height: 100%"></E-Right3>
  132. </div>
  133. </div>
  134. </div>
  135. <article class="dialog" v-if="showDialog">
  136. <h3>{{ dialogData.name }}</h3>
  137. <div class="container">
  138. <p v-for="item in dialogData.content" :key="item.name">{{ item }}</p>
  139. </div>
  140. </article>
  141. </div>
  142. </template>
  143. <script>
  144. import HyHeader from "@/components/HyHeader";
  145. import ELeft1 from "./charts/ELeft1";
  146. import ELeft2 from "./charts/ELeft2";
  147. import ELeft3 from "./charts/ELeft3";
  148. import ERight1 from "./charts/ERight1";
  149. import ERight2 from "./charts/ERight2";
  150. import ERight3 from "./charts/ERight3";
  151. export default {
  152. name: "LvShanXiang",
  153. data() {
  154. return {
  155. searchStr: "",
  156. isShowMain: true,
  157. showDialog: false,
  158. fieldInfo: {
  159. dr: {
  160. name: "长兴德睿生态农业开发有限公司",
  161. content: [
  162. "占地面积:200余亩",
  163. "羊舍数量:18幢",
  164. "建筑面积:13000㎡",
  165. "常年存栏:8500多只",
  166. "每年繁殖羔羊:10000多只",
  167. ],
  168. },
  169. ys: {
  170. name: "长兴永盛牧业有限公司",
  171. content: [
  172. "占地面积:200余亩",
  173. "羊舍数量:24幢",
  174. "建筑面积:9500㎡",
  175. "常年存栏:8000只",
  176. "预计年供应:30000只",
  177. ],
  178. },
  179. },
  180. dialogData: {name:'' , content: []}
  181. };
  182. },
  183. components: {
  184. HyHeader,
  185. ELeft1,
  186. ELeft2,
  187. ELeft3,
  188. ERight1,
  189. ERight2,
  190. ERight3,
  191. },
  192. created() {
  193. document.title = "吕山牧场";
  194. },
  195. methods: {
  196. search() {
  197. console.log(this.searchStr);
  198. console.log("search");
  199. this.isShowMain = false;
  200. },
  201. clickPoint(v) {
  202. this.showDialog = !this.showDialog;
  203. this.dialogData = this.fieldInfo[v]
  204. },
  205. qita() {
  206. this.isShowMain = true;
  207. this.showDialog = false;
  208. },
  209. },
  210. };
  211. </script>
  212. <style lang="scss" scope>
  213. .LvShanXiang {
  214. background-image: url(../../assets/bg.png);
  215. background-size: 100% 100%;
  216. background-repeat: no-repeat;
  217. box-sizing: border-box;
  218. // border: 1px solid #f52424;
  219. height: 100%;
  220. display: flex;
  221. flex-direction: column;
  222. > .warp {
  223. // border: 1px solid #ffee00;
  224. height: 100%;
  225. display: flex;
  226. .left {
  227. // border: 1px solid #2b65e0;
  228. width: 20%;
  229. display: flex;
  230. flex-direction: column;
  231. > .left1 {
  232. // border: 1px solid #8bdd77;
  233. height: 33.33%;
  234. }
  235. > .left2 {
  236. // border: 1px solid #ddad77;
  237. height: 33.33%;
  238. }
  239. > .left3 {
  240. // border: 1px solid #8bdd77;
  241. height: 33.33%;
  242. }
  243. }
  244. > .middle {
  245. width: 60%;
  246. min-width: 1600px;
  247. display: flex;
  248. flex-direction: column;
  249. align-items: center;
  250. > .section {
  251. width: 92%;
  252. .warp {
  253. display: flex;
  254. justify-content: space-around;
  255. .item {
  256. border-radius: 20px;
  257. height: 90px;
  258. min-width: 450px;
  259. border: 4px solid #53bafd;
  260. box-sizing: border-box;
  261. flex: 1 0 20%;
  262. margin: 20px 3%;
  263. padding: 10px 10px 10px 10px;
  264. font-size: 35px;
  265. font-weight: 600;
  266. display: flex;
  267. justify-content: center;
  268. align-items: center;
  269. .title {
  270. color: #fff;
  271. }
  272. .num {
  273. color: #53bafd;
  274. font-size: 1.2em;
  275. }
  276. .unit {
  277. color: #53bafd;
  278. font-size: 20px;
  279. margin-left: 15px;
  280. }
  281. }
  282. }
  283. }
  284. > .footer {
  285. // border: 1px solid #8877dd;
  286. width: 92%;
  287. flex-grow: 1;
  288. margin: 80px 0;
  289. display: flex;
  290. justify-content: center;
  291. align-items: center;
  292. position: relative;
  293. transition: all 1s ease;
  294. > .inputWrap {
  295. position: absolute;
  296. left: 0;
  297. top: 0;
  298. width: 500px;
  299. height: 80px;
  300. display: flex;
  301. align-items: center;
  302. font-size: 60px;
  303. color: #fff;
  304. border: 2px solid #797979;
  305. border-radius: 10px;
  306. background-color: #0e93b2;
  307. > .input {
  308. width: 200px;
  309. flex-grow: 1;
  310. font-size: 60px;
  311. color: #fff;
  312. padding-left: 20px;
  313. background: none;
  314. // outline: none;
  315. border: none;
  316. &:focus {
  317. // border: 4px solid #797979;
  318. background: none;
  319. outline: none;
  320. }
  321. }
  322. > .icon_search {
  323. position: absolute;
  324. right: 10px;
  325. width: 60px;
  326. height: 60px;
  327. background: url(../../assets/search.png) no-repeat;
  328. background-size: contain;
  329. }
  330. }
  331. > .bg_map {
  332. height: 80%;
  333. width: 70%;
  334. -webkit-user-select: none;
  335. -moz-user-select: none;
  336. -ms-user-select: none;
  337. user-select: none;
  338. }
  339. .point {
  340. position: absolute;
  341. > .warp {
  342. flex-basis: 1;
  343. display: flex;
  344. justify-content: center;
  345. align-items: center;
  346. border: 6px solid #2793d1;
  347. border-radius: 50%;
  348. box-sizing: border-box;
  349. animation: animation_warp 2s 0.2s infinite alternate;
  350. > .middle {
  351. display: flex;
  352. justify-content: center;
  353. align-items: center;
  354. position: absolute;
  355. box-sizing: border-box;
  356. border: 6px solid #2793d1;
  357. border-radius: 50%;
  358. animation: animation_middle 2s 0.2s infinite
  359. alternate;
  360. .center {
  361. position: absolute;
  362. display: inline-block;
  363. width: 20px;
  364. height: 20px;
  365. box-sizing: border-box;
  366. background-color: #2793d1;
  367. border-radius: 50%;
  368. animation: animation_center 2s 0.2s infinite;
  369. }
  370. }
  371. }
  372. @keyframes animation_warp {
  373. 0% {
  374. width: 140px;
  375. height: 140px;
  376. }
  377. 100% {
  378. width: 50px;
  379. height: 50px;
  380. transform: translate(45px, 45px);
  381. border: 6px solid transparent;
  382. }
  383. }
  384. @keyframes animation_middle {
  385. 0% {
  386. width: 50px;
  387. height: 50px;
  388. border: 6px solid transparent;
  389. }
  390. 100% {
  391. width: 140px;
  392. height: 140px;
  393. }
  394. }
  395. @keyframes animation_center {
  396. 0% {
  397. background-color: transparent;
  398. }
  399. 100% {
  400. background-color: #2793d1;
  401. }
  402. }
  403. }
  404. // > .p1 {
  405. // left: 50%;
  406. // top: 25%;
  407. // }
  408. // > .p2 {
  409. // left: 60%;
  410. // top: 45%;
  411. // }
  412. // > .p3 {
  413. // left: 35%;
  414. // top: 60%;
  415. // }
  416. > .p1 {
  417. left: 33%;
  418. top: 57%;
  419. }
  420. > .p2 {
  421. left: 55%;
  422. top: 45%;
  423. // z-index: 1;
  424. }
  425. > .icon_pasture_1 {
  426. position: absolute;
  427. // left: 29%;
  428. // top: 64%;
  429. left: 27%;
  430. top: 57%;
  431. text-align: center;
  432. > img {
  433. width: 120px;
  434. }
  435. > h3{
  436. color: #FFF;
  437. font-size: 30px;
  438. }
  439. }
  440. > .icon_pasture_2 {
  441. position: absolute;
  442. text-align: center;
  443. // left: 54.6%;
  444. // top: 51.7%;
  445. left: 55%;
  446. top: 48%;
  447. > img {
  448. width: 120px;
  449. }
  450. > h3{
  451. color: #FFF;
  452. font-size: 30px;
  453. }
  454. }
  455. }
  456. > .footer_2 {
  457. // border: 1px solid #8bdd77;
  458. width: 88%;
  459. margin-top: 30px;
  460. flex-grow: 1;
  461. box-sizing: border-box;
  462. // transition: all 3s ease;
  463. display: flex;
  464. flex-direction: column;
  465. > h1 {
  466. color: #fff;
  467. font-size: 60px;
  468. }
  469. > .tree {
  470. // border: 1px solid #9277dd;
  471. flex-grow: 1;
  472. width: 95%;
  473. margin: 3% auto;
  474. background: url(../../assets/tree.png) no-repeat center;
  475. background-size: 100% 100%;
  476. position: relative;
  477. font-size: 60px;
  478. font-weight: 600;
  479. color: #fff;
  480. > div {
  481. // border: 1px solid #dd7796;
  482. position: absolute;
  483. width: 22%;
  484. text-align: center;
  485. overflow: hidden;
  486. text-overflow: ellipsis;
  487. white-space: nowrap;
  488. }
  489. > .self {
  490. left: 5%;
  491. top: 50%;
  492. }
  493. > .f {
  494. left: 34.5%;
  495. top: 36.4%;
  496. }
  497. > .m {
  498. left: 34.5%;
  499. top: 60.9%;
  500. }
  501. > .ff {
  502. left: 71.4%;
  503. top: 9%;
  504. }
  505. > .fm {
  506. left: 71.4%;
  507. top: 36.4%;
  508. }
  509. > .mf {
  510. left: 71.4%;
  511. top: 60.9%;
  512. }
  513. > .mm {
  514. left: 71.4%;
  515. top: 85.6%;
  516. }
  517. }
  518. }
  519. }
  520. .right {
  521. // border: 1px solid #2b65e0;
  522. width: 20%;
  523. > .right1 {
  524. // border: 1px solid #8bdd77;
  525. height: 33.33%;
  526. }
  527. > .right2 {
  528. // border: 1px solid #ddad77;
  529. height: 33.33%;
  530. }
  531. > .right3 {
  532. // border: 1px solid #8bdd77;
  533. height: 33.33%;
  534. }
  535. }
  536. }
  537. }
  538. .dialog {
  539. // border: 1px solid #8bdd77;
  540. min-width: 500px;
  541. min-height: 300px;
  542. position: fixed;
  543. left: 50%;
  544. top: 30%;
  545. transform: translate(-50%, 0);
  546. background-color: #203c7a;
  547. background-image: linear-gradient(30deg, #0c1c46, #27428b);
  548. // background-image: radial-gradient(#203c7a 60%, #277AEB);
  549. box-shadow: 0px 0px 50px #454991;
  550. border-radius: 25px;
  551. overflow: hidden;
  552. box-sizing: border-box;
  553. // padding: 30px;
  554. color: #fff;
  555. > h3 {
  556. font-size: 50px;
  557. text-align: center;
  558. background-color: #207bc4;
  559. padding: 15px 30px 15px 30px;
  560. }
  561. > .container {
  562. font-size: 40px;
  563. margin: 20px 30px;
  564. }
  565. }
  566. </style>