创业服务样式

src/common/portrait.styl

@@ -23,6 +23,10 @@
   padding: 20px;
 }
 
+.pt-3 {
+  padding-top: 12px;
+}
+
 .pb-3 {
   padding-bottom: 12px;
 }

src/views/IncubationPlatform/Children/Services.vue

@@ -15,19 +15,19 @@
       <div
         :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
         :key="index"
-        class="item-box mb-8 pointer"
+        class="item-box mb-8 pointer d-flex flex-column"
         style="position: relative"
         v-for="(item, index) in list"
       >
         <img
-          @click="showModal(item.id)"
           :src="item.picUrl"
-          style="height: 220px; width: 100%; border: 1px solid #ccc"
           :title="item.intro"
+          @click="showModal(item.id)"
+          style="height: 220px; width: 100%; border: 1px solid #ccc"
         />
-        <p class="font-24 my-4" @click="showModal(item.id)">{{ item.name }}</p>
+        <p @click="showModal(item.id)" class="font-24 my-4">{{ item.name }}</p>
-        <p class="font-16 my-4 textColor line-height-30 item-intro">{{ item.intro }}</p>
+        <p class="font-16 mb-4 textColor line-height-30 item-intro">{{ item.intro }}</p>
-        <p class="see-more" @click="showDiv(index)">{{ showList[index] }}</p>
+        <p @click="showDiv(index)" class="baseColor d-flex flex-row-reverse">{{ showList[index] }}</p>
       </div>
     </div>
     <div class="inner">
@@ -42,36 +42,94 @@
         v-show="total > 8"
       />
     </div>
-    <a-modal :confirm-loading="confirmLoading" title="产品购买" :visible="visible" @cancel="handleCancel" @ok="handleOk" width="50%">
+    <a-modal
+      :confirm-loading="confirmLoading"
+      :visible="visible"
+      @cancel="handleCancel"
+      @ok="handleOk"
+      title="产品购买"
+      width="50%"
+    >
       <a-form :form="form">
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称">
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="公司名称"
+        >
           <a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" />
         </a-form-item>
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系人" required>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="联系人"
+          required
+        >
           <a-input placeholder="请输入联系人..." v-model.trim="platform.manName" />
         </a-form-item>
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required>
+        <a-form-item
-          <a-input @change="changePhone" placeholder="请输入联系电话.." type="tel" v-decorator="['tel', { rules: phoneRules }]" />
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="联系电话"
+          required
+        >
+          <a-input
+            @change="changePhone"
+            placeholder="请输入联系电话.."
+            type="tel"
+            v-decorator="['tel', { rules: phoneRules }]"
+          />
         </a-form-item>
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="图片验证码"
+          required
+        >
           <div class="d-flex flex-nowrap">
             <a-input placeholder="图片验证码" type="number" v-model="codeNum" />
-            <img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" />
+            <img
+              :src="picCode.imageBase64"
+              @click="changePicCode"
+              class="code_img ml-2"
+              v-if="picCode && picCode.imageBase64"
+            />
             <a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button>
             <!-- <a-input v-decorator="['account', { rules: rules.account }]" /> -->
           </div>
         </a-form-item>
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required>
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="短信验证码"
+          required
+        >
           <div class="d-flex flex-nowrap">
             <a-input placeholder="请输入验证码" type="number" v-model="platform.code" />
-            <a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button>
+            <a-button
-            <a-button :disabled="platform.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else>
+              class="code_img ml-2"
-              获取验证码
+              disabled
-            </a-button>
+              type="primary"
+              v-if="showInterval"
+            >重新发送 {{ interval }}</a-button>
+            <a-button
+              :disabled="platform.isTel === false"
+              @click="getCode"
+              class="code_img ml-2"
+              type="primary"
+              v-else
+            >获取验证码</a-button>
           </div>
         </a-form-item>
-        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="需求描述">
+        <a-form-item
-          <a-textarea placeholder="请输入需求描述..." style="height: 120px" v-model.trim="platform.describe" />
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="需求描述"
+        >
+          <a-textarea
+            placeholder="请输入需求描述..."
+            style="height: 120px"
+            v-model.trim="platform.describe"
+          />
         </a-form-item>
         <a-form-item
           :label-col="formItemLayout.labelCol"
@@ -79,8 +137,16 @@
           label="上传附件"
           v-show="typeData.type === 0"
         >
-          <a-upload :action="action" :default-file-list="fileList" @change="fileChange" list-type="picture" name="files">
+          <a-upload
-            <a-button> <a-icon type="upload" />点击上传附件 </a-button>
+            :action="action"
+            :default-file-list="fileList"
+            @change="fileChange"
+            list-type="picture"
+            name="files"
+          >
+            <a-button>
+              <a-icon type="upload" />点击上传附件
+            </a-button>
           </a-upload>
         </a-form-item>
       </a-form>
@@ -316,6 +382,7 @@ export default {
     },
     showDiv(index) {
       var divs = document.getElementsByClassName('item-intro');
+      console.log('divs: ', divs);
       let list = ['查看全部', '查看全部', '查看全部', '查看全部'];
       for (let i = 0; i < divs.length; i++) {
         if (index === i) {
@@ -361,14 +428,8 @@ export default {
   display: -webkit-box;
   // -webkit-line-clamp: 3;
   // -webkit-box-orient: vertical;
+  text-align: left;
   height: 90px;
   overflow: hidden;
 }
-
-.see-more {
-  color: #13acc4;
-  position: absolute;
-  right: 0;
-  bottom: -20px;
-}
 </style>