🎉优化：修改任务步骤样式

src/views/task/components/TaskDetails.vue

@@ -3,9 +3,9 @@
     <a-space direction="vertical">
       <!-- 任务步骤 -->
       <a-card type="inner">
-        <a-row>
-          <div v-if="taskInfo.endDate != ''" style="margin-top:5px;">
-            <a-col :span="2">
+        <a-row class="row-custom">
+          <div v-if="taskInfo.endDate != ''">
+            <a-col :span="2" style="margin-top:5px;">
               <a-tooltip>
                 <template slot="title">
                   标记为未完成
@@ -14,31 +14,7 @@
               </a-tooltip>
             </a-col>
             <a-col :span="20" style="margin-left:5px;">
-              <a-checkable-tag>
-                <del> <span style="font-size:15px">{{ taskInfo.title }}</span></del>
-              </a-checkable-tag>
-            </a-col>
-            <a-col :span="1" style="margin-left:5px;">
-              <div v-if="taskInfo.starLevel == false">
-                <a-tooltip>
-                  <template slot="title">
-                    将任务标记为重要
-                  </template>
-                  <a-popconfirm :visible="false" @visibleChange="signImportance">
-                    <a-icon type="star" />
-                  </a-popconfirm>
-                </a-tooltip>
-              </div>
-              <div v-else>
-                <a-tooltip>
-                  <template slot="title">
-                    删除重要性
-                  </template>
-                  <a-popconfirm :visible="false" @visibleChange="signImportance">
-                    <a-icon style="color:#4169E1" type="star" theme="filled" />
-                  </a-popconfirm>
-                </a-tooltip>
-              </div>
+              <a-input class="input-custom-del" v-model="taskInfo.title" />
             </a-col>
           </div>
           <div v-else>
@@ -51,31 +27,31 @@
               </a-tooltip>
             </a-col>
             <a-col :span="20" style="margin-left:5px;">
-              <a-input v-model="taskInfo.title" @pressEnter="updateTask" />
-            </a-col>
-            <a-col :span="1" style="margin-top:5px;margin-left:5px;">
-              <div v-if="taskInfo.starLevel == false">
-                <a-tooltip>
-                  <template slot="title">
-                    将任务标记为重要
-                  </template>
-                  <a-popconfirm :visible="false" @visibleChange="signImportance">
-                    <a-icon type="star" />
-                  </a-popconfirm>
-                </a-tooltip>
-              </div>
-              <div v-else>
-                <a-tooltip>
-                  <template slot="title">
-                    删除重要性
-                  </template>
-                  <a-popconfirm :visible="false" @visibleChange="signImportance">
-                    <a-icon style="color:#4169E1" type="star" theme="filled" />
-                  </a-popconfirm>
-                </a-tooltip>
-              </div>
+              <a-input class="input-custom" v-model="taskInfo.title" @pressEnter="updateTask" />
             </a-col>
           </div>
+          <a-col :span="1" style="margin-top:5px;margin-left:5px;">
+            <div v-if="taskInfo.starLevel == false">
+              <a-tooltip>
+                <template slot="title">
+                  将任务标记为重要
+                </template>
+                <a-popconfirm :visible="false" @visibleChange="signImportance">
+                  <a-icon type="star" />
+                </a-popconfirm>
+              </a-tooltip>
+            </div>
+            <div v-else>
+              <a-tooltip>
+                <template slot="title">
+                  删除重要性
+                </template>
+                <a-popconfirm :visible="false" @visibleChange="signImportance">
+                  <a-icon style="color:#4169E1" type="star" theme="filled" />
+                </a-popconfirm>
+              </a-tooltip>
+            </div>
+          </a-col>
         </a-row>
         <a-row style="margin-top:15px">
           <a-col>
@@ -84,12 +60,12 @@
                 <div v-if="item.isStepComplete == true">
                   <a-list-item-meta>
                     <a slot="title"><del>{{ item.title }}</del></a>
-                    <div slot="avatar">
+                    <div slot="avatar" style="margin-top:3px">
                       <a-tooltip>
                         <template slot="title">
                           标记为未完成
                         </template>
-                        <a-button shape="circle" type="primary" icon="check" size="small" @click="completeStep(index)" />
+                        <a-button class="mybtn-circle-mini-primary" shape="circle" type="primary" icon="check" size="small" @click="completeStep(index)" />
                       </a-tooltip>
                     </div>
                   </a-list-item-meta>
@@ -97,12 +73,12 @@
                 <div v-else>
                   <a-list-item-meta>
                     <a slot="title">{{ item.title }}</a>
-                    <div slot="avatar">
+                    <div slot="avatar" style="margin-top:3px">
                       <a-tooltip>
                         <template slot="title">
                           标记为已完成
                         </template>
-                        <a-button shape="circle" size="small" @click="completeStep(index)" />
+                        <a-button class="mybtn-circle-mini" shape="circle" size="small" @click="completeStep(index)" />
                       </a-tooltip>
                     </div>
                   </a-list-item-meta>
@@ -121,7 +97,7 @@
         </a-row>
         <a-row>
           <a-col>
-            <a-input v-model="stepContent" :placeholder="isShowStepList?' 下一步 ':' 添加步骤 '" @pressEnter="addStep">
+            <a-input class="input-custom-add" v-model="stepContent" :placeholder="isShowStepList?' 下一步 ':' 添加步骤 '" @pressEnter="addStep">
               <a-icon slot="prefix" type="plus" />
             </a-input>
           </a-col>
@@ -247,7 +223,8 @@
           </a-popconfirm>
         </a-col>
         <a-col :span="22" style="text-align:center;">
-          创建于 9 月 6 日 周一
+          {{ createDate }}
+          <!-- 创建于 9 月 26 日 星期一 -->
         </a-col>
         <a-col :span="1">
           <a-popconfirm title="是否确认删除任务?" ok-text="是" cancel-text="否" @confirm="deleteTask">
@@ -270,18 +247,14 @@ export default {
   components: {
     TaskReport
   },
-  props: {
-    taskInfo: {
-      type: Object,
-      required: true
-    }
-  },
   data() {
     return {
+      taskInfo: {},
       taskStepData: [], // 任务步骤数据
       stepContent: '',
       isAddedMyDay: false,
-      manhours: 0
+      manhours: 0,
+      createDate: ''
     }
   },
   computed: {
@@ -290,11 +263,21 @@ export default {
       return this.taskStepData.length > 0
     }
   },
-  created() {
-    console.log("任务步骤")
-    this.getTaskStep(this.taskInfo)
-  },
   methods: {
+    init(record) {
+      this.taskInfo = record
+      this.formatDate(this.taskInfo.createTime)
+      // todo 获取任务步骤数据
+      this.getTaskStep(this.taskInfo)
+    },
+    formatDate(param) {
+      const date = new Date(param);
+      const month = date.getMonth() + 1; // 月
+      const day = date.getDate(); // 日
+      const week = date.getDay(); // 星期
+      const weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+      this.createDate = `创建于 ${month} 月 ${day} 日 ${weekArr[week]}`;
+    },
     getTaskStep(param) {
       // todo：获取任务步骤数据
       this.taskStepData = [{
@@ -369,3 +352,98 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.row-custom {
+  position: relative;
+  height: auto;
+  margin-right: 0;
+  margin-left: -3px;
+  zoom: 0;
+  display: block;
+  box-sizing: border-box;
+}
+.mybtn-circle-mini {
+  min-width: 17px;
+  border-radius: 50%;
+  height: 17px;
+  padding: 0;
+  font-size: 10px;
+  text-align: center;
+  line-height: 1.499;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  white-space: nowrap;
+  background-image: none;
+  border: 1px solid transparent;
+  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  user-select: none;
+  touch-action: manipulation;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fff;
+  border-color: #d9d9d9;
+}
+.mybtn-circle-mini-primary {
+  min-width: 17px;
+  border-radius: 50%;
+  width: 17px;
+  height: 17px;
+  padding: 0;
+  font-size: 10px;
+  text-align: center;
+  background-color: #5882fa;
+  border-color: #5882fa;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+  box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
+  line-height: 0.5;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  white-space: nowrap;
+  background-image: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  user-select: none;
+  touch-action: manipulation;
+}
+.input-custom {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 0 8px;
+  border: 0;
+}
+.input-custom-del {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 0 8px;
+  border: 0;
+  text-decoration: line-through;
+}
+.input-custom-add >>> .ant-input-prefix {
+  left: 0;
+}
+.input-custom-add >>> .ant-input {
+  box-sizing: border-box;
+  margin: 0;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  display: inline-block;
+  width: 100%;
+  height: 32px;
+  padding: 4px 22px;
+  font-size: 14px;
+  line-height: 1.5;
+  background-color: #fff;
+  background-image: none;
+  border: none;
+  border-bottom: 1px solid rgba(131, 130, 130, 0.65);
+  border-radius: 2px;
+  transition: all 0.3s;
+}
+</style>

src/views/task/personal/OneDayForMe.vue

@@ -36,7 +36,7 @@
       </a-layout-content>
 
       <a-layout-sider v-show="showright" style="height:100%;margin-left:10px;background-color:rgb(240,242,245)" theme="light" width="300px">
-        <task-details ref="taskDetails" v-show="taskconfig" :taskInfo="taskInfo" @collapseSider="closeConfig"></task-details>
+        <task-details ref="taskDetails" v-show="taskconfig" @collapseSider="closeConfig"></task-details>
         <a-card title="建议" style="width:300px;" v-show="taskdrawer">
           <div slot="extra">
             <a-button type="link" size="small" icon="close" @click="closeDrawer" ghost></a-button>
@@ -148,7 +148,6 @@ export default {
 
       //展开折叠面板的key
       activeKey: ['finished'],
-      taskInfo: {}
     }
   },
   watch: {
@@ -231,6 +230,7 @@ export default {
         {
           endDate: '',
           starLevel: true,
+          createTime: '2021/09/08 10:10',
           finish: false,
           important: true,
           key: '2',
@@ -240,6 +240,7 @@ export default {
         {
           endDate: '',
           starLevel: true,
+          createTime: '2021/09/06 8:08',
           finish: false,
           important: true,
           key: '3',
@@ -249,6 +250,7 @@ export default {
         {
           endDate: '',
           starLevel: false,
+          createTime: '2021/09/05 8:08',
           finish: false,
           important: false,
           key: '4',
@@ -311,9 +313,8 @@ export default {
     //任务配置相关
     openConfig(param) {
       this.taskconfig = true
-      // this.$refs.taskDetails.init(param)
-      console.log(param)
-      this.taskInfo = param
+      // 初始化任务详情数据
+      this.$refs.taskDetails.init(param)
 
       this.taskdrawer = false
     },