zhangzl
/
nsgk_mobile
2
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
移动端
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
974 Commits
7 Ramas
139 MiB
 
 
Árbol: 4d5294f34d
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '4d5294f34d'
${ noResults }
nsgk_mobile/src/views/agriculturalTrusteeship/shop/shopOrganizationDetail.vue

443 líneas
11 KiB
Original Blame Histórico 

  1. <template>

  2.   <div class="home_wrapper">

  3.     <!--  头部开始  -->

  4.     <div class="header">

  5.       <div class="header_left" @click="onClickLeft">

  6.         <img src="../../../../static/images/agriculturalTrusteeship/return.png">

  7.         <p>需求详情</p>

  8.       </div>

  9.     </div>

  10.     <!--  头部结束  -->

  11. 

  12.     <!--  内容开始  -->

  13.     <div class="main">

  14.       <div class="main_content_right_list">

  15.         <div class="main_tit">

  16.           <i></i>

  17.           <p>家家加加加加加加加就爱简爱家合作社</p>

  18.         </div>

  19.         <p class="main_content">村口需要水牛石头诚招水牛贷款联系电话165822本人人品优良绝不拖欠还款。</p>

  20.         <div class="main_money">

  21.           <p><span>需求金额</span><span>￥</span>512,000.00</p>

  22.         </div>

  23.         <van-divider />

  24. 

  25.         <van-field

  26.           readonly

  27.           label="负责人"

  28.           input-align="right"

  29.           :border="false"

  30.           placeholder="负责人"

  31.         />

  32. 

  33.         <van-field

  34.           readonly

  35.           label="联系方式"

  36.           input-align="right"

  37.           :border="false"

  38.           placeholder="联系方式"

  39.         />

  40. 

  41.         <van-field

  42.           readonly

  43.           label="地址"

  44.           input-align="right"

  45.           :border="false"

  46.           placeholder="地址"

  47.         />

  48. 

  49.       </div>

  50.       <div class="main_content_right_list2" v-for="(item,index) in 5" :key="index" @click="$router.push({name:'agriculturalTrusteeshipShopNeedsList'})">

  51.         <div class="main_tit">

  52.           <p>家家加加加加加加加就爱简爱家合作社</p>

  53.           <span>(1/10)</span>

  54.         </div>

  55.         <div class="main_content">

  56.           <p>玉米</p>

  57.           <p>32022亩</p>

  58.         </div>

  59.         <div class="main_money">

  60.           <p><i></i>丰田村</p>

  61.           <p><i></i>2023.03.15-2024.09.15</p>

  62.         </div>

  63.       </div>

  64.     </div>

  65.     <!--  内容结束  -->

  66. 

  67.   </div>

  68. </template>

  69. <script>

  70.   import Cookies from "js-cookie";

  71.   import {productList, productOut, productIn, serviceGet, treeselect} from "@/api/agriculturalTrusteeship";

  72.   export default {

  73.     name: "shopOrganizationDetail",

  74.     data() {

  75.       return {

  76. 

  77.       };

  78.     },

  79.     created() {

  80. 

  81.     },

  82.     methods: {

  83. 

  84.     },

  85.   }

  86. </script>

  87. <style scoped lang="scss">

  88. .home_wrapper{

  89.   background: #f9f9f9;

  90.   height: 100vh;

  91.   overflow: hidden;

  92. }

  93.   /*头部*/

  94.   .header{

  95.     display: flex;

  96.     align-items: center;

  97.     justify-content: space-between;

  98.     background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);

  99.     padding: 2vh 4% 2vh;

  100.     .header_left{

  101.       display: flex;

  102.       align-items: center;

  103.       p{

  104.         font-size: .4rem;

  105.         color: #ffffff;

  106.         line-height: 1;

  107.         margin-left: 10PX;

  108.       }

  109.     }

  110.     .header_right{

  111.       font-size: .35rem;

  112.       background: #334281;

  113.       padding: 2PX 10PX;

  114.       border-radius: 50PX;

  115.       /deep/ .van-checkbox__icon--checked .van-icon{

  116.         color: #334281;

  117.       }

  118.       /deep/ .van-checkbox__label{

  119.         color: #ffffff;

  120.       }

  121.       /deep/ .van-checkbox__icon .van-icon{

  122.         width: .9em;

  123.         height: .9em;

  124.         line-height: .9em;

  125.       }

  126.       /deep/ .van-icon-success::before{

  127.         width: .9em;

  128.         height: .9em;

  129.       }

  130.       /deep/ .van-checkbox__icon{

  131.         height: auto;

  132.       }

  133.     }

  134.   }

  135. 

  136.   .main_btn{

  137.     display: flex;

  138.     background: #ffffff;

  139.     border-top-left-radius: 25PX;

  140.     border-top-right-radius: 25PX;

  141.     overflow: hidden;

  142.     padding: 4vw 4% 0;

  143.     justify-content: space-between;

  144.     .btn_box_01{

  145.       width: 48%;

  146.       display: flex;

  147.       justify-content: center;

  148.       align-items: center;

  149.       border: 1Px dashed #4E7FFF;

  150.       color: #4E7FFF;

  151.       font-size: .35rem;

  152.       line-height: 15vw;

  153.       border-radius: 10Px;

  154.       p:first-child{

  155.         font-weight: bold;

  156.         margin-right: 5PX;

  157.       }

  158.     }

  159.     .btn_box_02{

  160.       width: 48%;

  161.       display: flex;

  162.       justify-content: center;

  163.       align-items: center;

  164.       background: rgba(78,127,255,0.17);

  165.       color: #1E49BB;

  166.       font-size: .35rem;

  167.       line-height: 15vw;

  168.       border-radius: 10Px;

  169.       p{

  170.         margin-left: 5PX;

  171.       }

  172.     }

  173.   }

  174. 

  175.   .serviceName{

  176.     display: flex;

  177.     align-items: center;

  178.     justify-content: space-between;

  179.     span{

  180.       background: #E8E8E8;

  181.       padding: 0 8PX;

  182.       border-radius: 5PX;

  183.       color: #7A7A7A;

  184.       margin-right: 5PX;

  185.     }

  186.     .active{

  187.       background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);

  188.       color: #ffffff;

  189.     }

  190.   }

  191. 

  192.   .nav{

  193.     background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);

  194.     padding-bottom: 15PX;

  195.     .tt{

  196.       font-size: .45rem;

  197.       color: #334281;

  198.     }

  199.     .content{

  200.       background: #ffffff;

  201.       width: 92%;

  202.       margin: 0 auto;

  203.       box-shadow: 0px 0px 10PX rgba(0,0,0,0.1);

  204.       border-radius: 25PX;

  205.       padding: 1.5vh 4%;

  206.     }

  207.     /deep/ .van-cell{

  208.       padding: 0;

  209.       margin-bottom: 10PX;

  210.       &:last-child{

  211.         margin: 0;

  212.       }

  213.     }

  214.   }

  215. 

  216.   /* 内容 */

  217.   .main{

  218.     background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);

  219.     background-size: 100% 20PX;

  220.     background-repeat: no-repeat;

  221.     /deep/ .van-tabs__nav{

  222.       border-top-left-radius: 25PX;

  223.       border-top-right-radius: 25PX;

  224.       overflow: hidden;

  225.       background: #f9f9f9;

  226.     }

  227.     /deep/ .van-tabs__line{

  228.       background: #334281!important;

  229.     }

  230.     /deep/ .van-tab--active{

  231.       color: #334281;

  232.     }

  233.     /deep/ .van-tabs__content{

  234.       background: #f9f9f9;

  235.       padding-top: 2vh;

  236.     }

  237.     .search{

  238.        display: flex;

  239.        justify-content: space-between;

  240.        align-items: center;

  241.        width: 92%;

  242.        margin: 0PX auto;

  243.        border: 1px solid #6E93F3;

  244.        padding: 1PX 1PX 1PX 12PX ;

  245.        border-radius: 50PX;

  246.        input{

  247.          flex: 1;

  248.          background: transparent;

  249.          margin-left: 10PX;

  250.        }

  251.     }

  252.     .content{

  253.       width: 92%;

  254.       margin: 0 auto;

  255.       margin-top: 2vh;

  256.       .content_tt{

  257.         font-size: .35rem;

  258.       }

  259.       .content_con{

  260.         display: flex;

  261.         justify-content: space-between;

  262.         margin-top: 1.5vh;

  263.         .content_con_left{

  264.           display: flex;

  265.           flex-direction:column;

  266.           justify-content: space-between;

  267.           p{

  268.             font-size: .35rem;

  269.             padding-left: 18PX;

  270.             &:nth-child(1){

  271.               background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_project.png") no-repeat left center;

  272.             }

  273.             &:nth-child(2){

  274.               background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_name.png") no-repeat left center;

  275.             }

  276.             &:nth-child(3){

  277.               background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_iphone.png") no-repeat left center;

  278.             }

  279.           }

  280.         }

  281.         .content_con_right{

  282.           display: flex;

  283.           justify-content: end;

  284.           align-items: center;

  285.           img{

  286.             border-radius: 10PX;

  287.             width: 40%;

  288.             margin-left: 5%;

  289.             box-shadow: 0px 5PX 10PX rgba(0,0,0,0.2);

  290.             &:last-child{

  291.               width: auto;

  292.               box-shadow: none;

  293.             }

  294.           }

  295.         }

  296.       }

  297.     }

  298.     .main_content_right_list{

  299.       margin: 0 auto;

  300.       margin-bottom: 2vh;

  301.       width: 92%;

  302.       background: #ffffff;

  303.       padding: 15PX 3%;

  304.       border-radius: 10Px;

  305.       box-shadow: 0px 5PX 10PX rgba(0,0,0,0.1);

  306.       text-align: center;

  307.       /deep/ .van-cell{

  308.         padding: 0;

  309.         margin-bottom: 10PX;

  310.         &:last-child{

  311.           margin: 0;

  312.         }

  313.       }

  314.       .main_content{

  315.         font-size: .35rem;

  316.         line-height: .7rem;

  317.         margin-top: 10PX;

  318.         text-align: left;

  319.       }

  320.       .main_tit{

  321.         color: #4E7FFF;

  322.         font-size: .38rem;

  323.         display: flex;

  324.         align-items: center;

  325.         i{

  326.           display: block;

  327.           width: 16PX;

  328.           height: 16PX;

  329.           margin-right: 5PX;

  330.           flex-shrink: 0;

  331.           background: url("../../../../static/images/agriculturalTrusteeship/insurance/shop_needs_icon01.png");

  332.         }

  333.         p{

  334.           display: -webkit-box;

  335.           -webkit-box-orient: vertical;

  336.           -webkit-line-clamp: 1;

  337.           word-break: break-all;

  338.           overflow: hidden;

  339.         }

  340.         span{

  341.           font-size: .3rem;

  342.           color: #8B8B8B;

  343.           flex-shrink: 0;

  344.         }

  345.       }

  346.       .main_money{

  347.         background: rgba(255,94,0,0.15);

  348.         display: inline-block;

  349.         padding: 5PX 15PX;

  350.         border-radius: 8PX;

  351.         margin: 10PX auto;

  352.         p{

  353.           &:nth-child(1){

  354.             color: #FF5E00;

  355.             font-size: .4rem;

  356.             span{

  357.               font-size: .3rem;

  358.             }

  359.           }

  360.           &:nth-child(2){

  361.             color: #8B8B8B;

  362.             font-size: .35rem;

  363.           }

  364.         }

  365.         span:nth-child(1){

  366.           margin-right: 5PX;

  367.         }

  368.       }

  369.     }

  370.     .main_content_right_list2{

  371.       margin: 0 auto;

  372.       margin-bottom: 2vh;

  373.       width: 92%;

  374.       background: #ffffff;

  375.       padding: 15PX 3%;

  376.       border-radius: 10Px;

  377.       box-shadow: 0px 5PX 10PX rgba(0,0,0,0.1);

  378.       .main_tit{

  379.         font-size: .38rem;

  380.         display: flex;

  381.         align-items: center;

  382.         justify-content: space-between;

  383.         p{

  384.           display: -webkit-box;

  385.           -webkit-box-orient: vertical;

  386.           -webkit-line-clamp: 1;

  387.           word-break: break-all;

  388.           overflow: hidden;

  389.         }

  390.         span{

  391.           font-size: .3rem;

  392.           color: #8B8B8B;

  393.           flex-shrink: 0;

  394.         }

  395.       }

  396.       .main_money{

  397.         display: flex;

  398.         justify-content: space-between;

  399.         margin-top: 10PX;

  400.         p{

  401.           font-size: .35rem;

  402.           color: #8B8B8B;

  403.           display: flex;

  404.           align-items: center;

  405.           &:nth-child(1){

  406.             i{

  407.               display: inline-block;

  408.               width: 11PX;

  409.               height: 13Px;

  410.               margin-right: 2PX;

  411.               background: url("../../../../static/images/agriculturalTrusteeship/insurance/shop_needs_icon02.png");

  412.             }

  413.           }

  414.           &:nth-child(2){

  415.             i{

  416.               display: inline-block;

  417.               width: 13PX;

  418.               height: 13Px;

  419.               margin-right: 2PX;

  420.               background: url("../../../../static/images/agriculturalTrusteeship/insurance/shop_needs_icon03.png");

  421.             }

  422.           }

  423.         }

  424.       }

  425.       .main_content{

  426.         font-size: .35rem;

  427.         line-height: .6rem;

  428.         margin-top: 10PX;

  429.         display: flex;

  430.         justify-content: space-between;

  431.         p{

  432.           color: #4E7FFF;

  433.           &:nth-child(1){

  434.             background: rgba(78,127,255,0.13);

  435.             padding: 0 15PX;

  436.             border-radius: 5PX;

  437.           }

  438.         }

  439.       }

  440.     }

  441.   }

  442. </style>