1

src/components/pages/components/proMan.vue

@@ -0,0 +1,113 @@
+<template>
+  <div style="height: 100%; width: 100%; overflow: hidden">
+    <div class="rwBox">
+      <div class="rwTop">
+        <div class="rwTouImg"></div>
+        <div>于小宁</div>
+      </div>
+      <div class="rwMidBox">
+        <div>确定季度销售规划</div>
+        <div class="rwMessage">
+          <div class="rwBoxMessage">
+            <div class="rwIcon">
+              <img src="../../../assets/icon/startTime.png" alt="" />
+            </div>
+            <div>开始时间：{{ startTime }} </div>
+          </div>
+          <div class="rwBoxMessage">
+            <div class="rwIcon">
+              <img src="../../../assets/icon/endTime.png" alt="" />
+            </div>
+            <div>完成时间：{{ endTime }} </div>
+          </div>
+          <div class="rwBoxMessage">
+            <div class="rwIcon">
+              <img src="../../../assets/icon/allTime.png" alt="" />
+            </div>
+            <div>所需时长：{{ time }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      time: "",
+      startTime: "2022-08-25",
+      endTime: "2022-09-15",
+    };
+  },
+  methods: {
+    getDay() {
+      var day =
+        new Date(this.endTime).getTime() - new Date(this.startTime).getTime(); //日期转时间戳
+      this.time = Math.floor(day / 86400000);
+    },
+  },
+  created() {
+    this.getDay();
+  },
+};
+</script>
+
+<style scoped>
+.rwBox {
+  width: 280px;
+  height: 220px;
+  background: #fff;
+}
+.rwTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.rwTouImg {
+  width: 25px;
+  height: 25px;
+  background: #0258f1 100%;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.rwMidBox {
+  border: 2px solid #e3e6e8;
+  width: 270px;
+  margin-top: 10px;
+  border-radius: 15px;
+}
+.rwMidBox > div:nth-child(1) {
+  font-weight: bold;
+  margin: 15px 0 0 0;
+  padding: 0 10px;
+}
+.rwMessage {
+  margin-top: 5px;
+  padding: 0 10px 10px 10px;
+}
+.rwBoxMessage {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 10px 0;
+}
+.rwIcon {
+  width: 20px;
+  height: 20px;
+  /* background: #000;
+  border-radius: 50%; */
+  margin-right: 5px;
+}
+.rwIcon > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.rwBoxMessage > div:nth-child(2) {
+  font-size: 14px;
+}
+</style>