docs: 新建项目，分享项目样式修改

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-09-02)
+# 0.1.0 (2021-09-03)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -193,6 +193,7 @@
  - | 小红点api缓存修改 | e992343
  - | 修改代码格式 | 14123d7
  - | 修改定期任务骨架屏高度 | 909a734
+ - | 修改样式 | 322b0fb
  - | 整理代码 | 7a55315
  - | 组件文件夹新建 | 22bfe7b
  - | 组件文件夹新建 | 17bb8c9

src/components/Title/Title.vue

@@ -18,7 +18,7 @@
       style="width: 100%; height: 100vh; z-index: 21; position: fixed; background: rgba(0, 0, 0, 0.3)"
     ></view>
     <!-- 右上角 ... 弹窗 -->
-    <view class="popup border" v-if="show">
+    <view class="popup border shadow-md" v-if="show">
       <view class="flex pb-3 border-b-1">
         <u-icon name="plus-circle" size="36" style="margin: 0 15px 3px 0"></u-icon>
         <view @click="newprojects">新建项目</view>
@@ -29,7 +29,7 @@
       </view>
     </view>
     <!-- 分享项目弹窗 -->
-    <view class="secondPopup flex justify-center" style="overflow: hidden" v-if="secondShow">
+    <view class="secondPopup flex justify-center" v-if="secondShow">
       <view class="content">
         <view class="popupTitle flex justify-center">创建分享链接</view>
         <view>选择以什么角色分享项目</view>
@@ -60,7 +60,7 @@
 
         <view @click="select">
           <!-- 全选按钮 -->
-          <view class="flex" style="margin-top: 10px">
+          <view class="flex mt-4">
             <view>
               <u-checkbox-group>
                 <u-checkbox v-model="checked" @change="checkedAll"></u-checkbox>
@@ -71,7 +71,7 @@
           </view>
           <!-- 多选框 -->
           <view>
-            <u-checkbox-group class="checkboxs flex flex-1 items-center" v-for="(item, index) in list" :key="index">
+            <u-checkbox-group class="checkboxs flex flex-1 items-center mt-4" v-for="(item, index) in list" :key="index">
               <div class="flex-1 flex items-center">
                 <u-checkbox v-model="item.checked"></u-checkbox>
                 <u-avatar :src="item.src" size="55" style="background: #d8dce0; margin-right: 10px"></u-avatar>
@@ -80,14 +80,13 @@
                   <div style="color: #c4d0e1">{{ item.joinMethod }}</div>
                 </div>
               </div>
-              <div style="font-size: 18px; color: #f37378">{{ item.role }}</div>
             </u-checkbox-group>
           </view>
         </view>
       </view>
     </view>
     <!-- 新建项目弹窗 -->
-    <NewProjects class="thirdPopup flex" v-if="newProjectsShow" />
+    <NewProjects class="thirdPopup flex transition-transform" v-if="newProjectsShow" />
   </view>
 </template>
 <script>
@@ -294,8 +293,9 @@ export default {
 .secondPopup {
   background: #ffffff;
   position: fixed;
-  left: 6%;
-  top: 25%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
   z-index: 33;
   border-radius: 5px;
 }
@@ -310,7 +310,6 @@ export default {
 }
 .content {
   width: 330px;
-  height: 330px;
   border: 1px solid #b4b4b4;
   // background: white;
   padding: 15px;
@@ -332,7 +331,6 @@ export default {
   padding: 15px;
   color: black;
   border-radius: 5px;
-  transition: all 2s;
   // border: 1px solid black;
 }
 

src/components/Title/components/NewProjects.vue

@@ -2,17 +2,17 @@
   <div style="padding: 15px; width: 330px">
     <div class="form">
       <!-- 项目名称 -->
-      <div class="flex items-center" style="border-bottom: 1px solid #dcdfe6">
+      <div class="flex items-center">
         <div>名称</div>
         <u-input v-model="nameValue" :type="type" :border="border" />
       </div>
       <!-- 起止时间 -->
-      <div class="flex items-center" style="border-bottom: 1px solid #dcdfe6">
+      <div class="flex items-center">
         <div>起止-截止时间</div>
         <u-input v-model="timeValue" :type="type" :border="border" />
       </div>
       <!-- 多选框 -->
-      <div class="flex justify-between items-center" style="border-bottom: 1px solid #dcdfe6; width: 100%">
+      <div class="flex justify-between items-center">
         <div>负责人</div>
         <div class="" label="负责人" style="width: 85%">
           <u-dropdown ref="uDropdown">
@@ -41,12 +41,12 @@
       <!-- 下拉框的内容 -->
       <div v-if="show">
         <!-- 描述 -->
-        <div class="flex items-center" style="border-bottom: 1px solid #dcdfe6">
+        <div class="flex items-center">
           <div>描述</div>
           <u-input v-model="decripeValue" :type="type" :border="border" />
         </div>
         <!-- 所属项目 -->
-        <div class="flex items-center" style="border-bottom: 1px solid #dcdfe6">
+        <div class="flex items-center">
           <div>所属项目</div>
           <div class="" style="position: relative; background: #fff">
             <u-input v-model="projectValue" :type="type" :border="border" @click="isProjectShow" />
@@ -58,17 +58,17 @@
           </div>
         </div>
         <!-- 所属任务 -->
-        <div class="flex items-center" style="border-bottom: 1px solid #dcdfe6">
+        <div class="flex items-center">
           <div>所属任务</div>
           <u-input v-model="taskValue" :type="type" :border="border" />
         </div>
         <!-- 上道工序 -->
-        <div class="flex items-center" style="border-bottom: 1px solid #dcdfe6">
+        <div class="flex items-center">
           <div>上道工序</div>
           <u-input v-model="lastValue" :type="type" :border="border" />
         </div>
         <!-- 检查人多选框 -->
-        <div class="flex justify-between items-center" style="border-bottom: 1px solid #dcdfe6; width: 100%">
+        <div class="flex justify-between items-center">
           <div>检查人</div>
           <div class="" label="检查人" style="width: 85%">
             <u-dropdown ref="dropdown">
@@ -100,7 +100,7 @@
           <u-input style="border-bottom: 1px solid #dcdfe6" placeholder="交付物名称2" :type="type" :border="border" />
         </div>
       </div>
-      <u-button class="flex justify-center" style="margin-top: 20px" type="primary">提交</u-button>
+      <u-button class="btn flex justify-center" type="primary" shape="circle" size="medium">提交</u-button>
     </div>
   </div>
 </template>
@@ -289,4 +289,10 @@ export default {
   border: none !important;
   padding: 5px;
 }
+.u-input {
+  border-bottom: 1px solid #ccc;
+}
+.btn {
+  margin-top: 20px;
+}
 </style>