详情页初稿 差动画

pages/Project/detail.vue

@@ -1,111 +1,122 @@
 <template>
-  <view class="content">
-    <view class="title"> 项目详情 </view>
-    <view class="main">
-      <view class="list">
-        <view class="detail">
-          <span class="subTitle">项目名称:</span>
-          <span class="detailContent">{{ currentProject.project_name }}</span>
-        </view>
-        <view class="detail" v-if="currentProject.TypeInfo">
-          <span class="subTitle">项目类别:</span>
-          <span class="detailContent">{{ currentProject.TypeInfo.name }}</span>
-        </view>
-        <view class="detail">
-          <span class="subTitle">流程:</span>
-          <span class="detailContent">{{ currentProject.FlowInfo.name }}</span>
-        </view>
-        <view v-if="currentProject.type_id != 7">
-          <view class="detail" v-if="currentProject.IndustryInfo">
-            <span class="subTitle">行业名称:</span>
+  <view class="page">
+    <view class="content">
+      <view class="head"> <view class="title"> 项目详情 </view></view>
+      <view class="main">
+        <view class="list">
+          <view class="detail">
+            <span class="subTitle">项目名称:</span>
+            <span class="detailContent">{{ currentProject.project_name }}</span>
+          </view>
+          <view class="detail" v-if="currentProject.TypeInfo">
+            <span class="subTitle">项目类别:</span>
+            <span class="detailContent">{{
+              currentProject.TypeInfo.name
+            }}</span>
+          </view>
+          <view class="detail">
+            <span class="subTitle">流程:</span>
+            <span class="detailContent">{{
+              currentProject.FlowInfo.name
+            }}</span>
+          </view>
+          <view v-if="currentProject.type_id != 7">
+            <view class="detail" v-if="currentProject.IndustryInfo">
+              <span class="subTitle">行业名称:</span>
+              <span class="detailContent">
+                {{ currentProject.IndustryInfo.name }}
+              </span>
+            </view>
+            <view class="detail" v-if="currentProject.location">
+              <span class="subTitle">项目地区:</span>
+              <span class="detailContent">
+                {{
+                  `${currentProject.location}(${currentProject.location_code})`
+                }}
+              </span>
+            </view>
+            <view class="detail" v-if="currentProject.name">
+              <span class="subTitle">项目简称:</span>
+              <span class="detailContent">{{ currentProject.name }}</span>
+            </view>
+            <view class="detail" v-if="currentProject.version">
+              <span class="subTitle">项目批次:</span>
+              <span class="detailContent">{{ currentProject.version }}期</span>
+            </view>
+          </view>
+          <view class="detail">
+            <span class="subTitle">状态:</span>
             <span class="detailContent">
-              {{ currentProject.IndustryInfo.name }}
+              {{ status[currentProject.project_status] }}
             </span>
           </view>
-          <view class="detail" v-if="currentProject.location">
-            <span class="subTitle">项目地区:</span>
+          <view class="detail">
+            <span class="subTitle">节点:</span>
             <span class="detailContent">
-              {{
-                `${currentProject.location}(${currentProject.location_code})`
-              }}
+              {{ `${currentProject.NodeInfo.node}(` }}
+              <span v-if="currentProject.audit_status == 0">待提交</span>
+              <span
+                v-if="currentProject.audit_status == 1"
+                :style="{ color: '#1890ff' }"
+              >
+                审核中
+              </span>
+              <span
+                v-if="currentProject.audit_status == 2"
+                :style="{ color: '#f5222d' }"
+              >
+                审核拒绝
+              </span>
+              <span
+                v-if="currentProject.audit_status == 3"
+                :style="{ color: '#a0d911' }"
+              >
+                审核通过
+              </span>
+              <span>)</span>
             </span>
           </view>
-          <view class="detail" v-if="currentProject.name">
-            <span class="subTitle">项目简称:</span>
-            <span class="detailContent">{{ currentProject.name }}</span>
+          <view class="detail" v-if="currentProject.audit_status == 2">
+            <span class="subTitle">拒绝原因:</span>
+            <span class="detailContent">
+              {{ currentProject.audit_comment }}
+            </span>
           </view>
-          <view class="detail" v-if="currentProject.version">
-            <span class="subTitle">项目批次:</span>
-            <span class="detailContent">{{ currentProject.version }}期</span>
+          <view class="detail" v-if="currentProject.AuthorUser">
+            <span class="subTitle">售前项目经理:</span>
+            <span class="detailContent">{{
+              currentProject.AuthorUser.CName
+            }}</span>
           </view>
-        </view>
-        <view class="detail">
-          <span class="subTitle">状态:</span>
-          <span class="detailContent">
-            {{ status[currentProject.project_status] }}
-          </span>
-        </view>
-        <view class="detail">
-          <span class="subTitle">节点:</span>
-          <span class="detailContent">
-            {{ `${currentProject.NodeInfo.node}(` }}
-            <span v-if="currentProject.audit_status == 0">待提交</span>
-            <span
-              v-if="currentProject.audit_status == 1"
-              :style="{ color: '#1890ff' }"
-            >
-              审核中
-            </span>
-            <span
-              v-if="currentProject.audit_status == 2"
-              :style="{ color: '#f5222d' }"
-            >
-              审核拒绝
+          <view class="detail" v-if="currentProject.AuthorDepInfo">
+            <span class="subTitle">所属部门:</span>
+            <span class="detailContent">
+              {{ currentProject.AuthorDepInfo.Name }}
             </span>
-            <span
-              v-if="currentProject.audit_status == 3"
-              :style="{ color: '#a0d911' }"
-            >
-              审核通过
+          </view>
+          <view class="detail">
+            <span class="subTitle">项目编号:</span>
+            <span class="detailContent">
+              {{ currentProject.project_full_code }}
             </span>
-            <span>)</span>
-          </span>
-        </view>
-        <view class="detail" v-if="currentProject.audit_status == 2">
-          <span class="subTitle">拒绝原因:</span>
-          <span class="detailContent">
-            {{ currentProject.audit_comment }}
-          </span>
-        </view>
-        <view class="detail" v-if="currentProject.AuthorUser">
-          <span class="subTitle">售前项目经理:</span>
-          <span class="detailContent">{{
-            currentProject.AuthorUser.CName
-          }}</span>
-        </view>
-        <view class="detail" v-if="currentProject.AuthorDepInfo">
-          <span class="subTitle">所属部门:</span>
-          <span class="detailContent">
-            {{ currentProject.AuthorDepInfo.Name }}
-          </span>
-        </view>
-        <view class="detail">
-          <span class="subTitle">项目编号:</span>
-          <span class="detailContent">
-            {{ currentProject.project_full_code }}
-          </span>
-        </view>
-      </view>
+          </view>
 
-      <view class="title">审核详情 </view>
-      <view class="list">
-        <uni-steps
-          :options="nodeList.list"
-          :active="nodeList.currentIndex"
-          direction="column"
-        />
+          <view class="authDetail">
+            <view class="authTitle">审核详情:</view>
+            <view>
+              <uni-steps
+                :options="nodeList.list"
+                :active="nodeList.currentIndex"
+                direction="column"
+              />
+            </view>
+          </view>
+        </view>
       </view>
+    </view>
 
+    <view class="footer" ref="footer">
+      <view class="footer_text" @click="showEdit"> 操作 </view>
       <edit
         :project="currentProject"
         :user="user"
@@ -186,6 +197,10 @@ export default {
             .join("，");
       }
     },
+    showEdit(){
+      console.log(this.$refs.footer);
+      console.log(this.$refs.footer.$el.clientHeight);
+    }
   },
 };
 </script>
@@ -197,76 +212,70 @@ export default {
 }
 .main {
   width: 100%;
-  padding-bottom: 60px;
 }
-.title {
-  width: 100%;
-  padding: 0 20px 20px 20px;
-  font: 24px bold;
+.head {
+  width: calc(100% - 60rpx);
+  padding: 40rpx;
+  position: fixed;
+  background: url("~@/static/app-plus/menu-title-bg.png") no-repeat center;
+  background-size: 100% 100%;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title {
+    font: 18px bold;
+    color: #fff;
+  }
 }
 .list {
-  margin: 0 10% 20px 10%;
+  margin: 0 5%;
+  padding-top: 130rpx;
 }
 .detail {
   width: 100%;
   padding: 15px 0;
-  font-size: 18px;
+  font-size: 28rpx;
+  border-bottom: 1rpx solid #eee;
   display: flex;
   justify-items: space-between;
   .subTitle {
     width: 40%;
   }
   .detailContent {
+    text-align: end;
     width: 60%;
   }
 }
-.select {
+.authDetail {
   width: 100%;
-  height: 72rpx;
-  line-height: 70rpx;
-  border: 1px solid #666;
-  padding-left: 20rpx;
-}
-::v-deep {
-  .uni-steps__column-title {
-    font-size: 18px;
-    line-height: 24px;
-  }
-  .uni-steps__column-desc {
-    font-size: 14px;
-    line-height: 18px;
-  }
-}
-
-.editBtns {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  margin: 0 5%;
-  .edit {
-    width: 30%;
-    margin-bottom: 20px;
-    font-size: 16px;
-    text-align: center;
+  font-size: 28rpx;
+  border-bottom: 1rpx solid #eee;
+  margin-bottom: 60px;
+  .authTitle {
+    padding: 20rpx 0;
+    margin: 10rpx 0;
   }
 }
-
-.group {
+.footer {
   width: 100%;
-  display: flex;
   position: fixed;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  bottom: 0;
+  top: calc(100vh - 50px);
   left: 0;
-  .commit {
-    width: 50%;
-    border-radius: 0;
-    margin: inherit;
-  }
 }
-
-.depSelect {
-  width: 200px;
+.footer_text {
+  text-align: center;
+  line-height: 50px;
+  color: white;
+  display: block;
+  font-size: 18px;
+  background: #5b78bf;
+  flex: 0 0 auto;
+}
+::v-deep {
+  .card-wrapper {
+    padding: 10rpx 0;
+    background: #fff;
+  }
 }
 </style>

pages/Project/list.vue

@@ -12,7 +12,7 @@
           ></uni-data-checkbox>
         </span>
       </view>
-      <view class="head" v-if="auth">
+      <view class="head" v-else>
         <view class="title">审核列表</view>
       </view>
       <scroll-view
@@ -146,9 +146,9 @@ export default {
   },
   onLoad(options) {
     this.auth = Boolean(options.auth);
-    this.init();
   },
   onShow() {
+    this.init();
     this.initData();
   },
   onNavigationBarButtonTap() {
@@ -251,11 +251,6 @@ export default {
   width: 90%;
   margin-top: 150rpx;
 }
-.project {
-  border-bottom: 2rpx solid gray;
-  padding: 30rpx 0px;
-  font-size: 16px;
-}
 .loadmore {
   padding: 30rpx 0px;
   font-size: 16px;