修改

src/views/MyNutrition.vue

@@ -1,50 +1,65 @@
 <template>
   <div class="page-content">
     <div class="left-content">
+      <div class="item-left score-content">
+        <div class="score-title-box">
+          <div class="score-title">营养评分</div>
+          <img @click="show.showMaskQA = true" class="inquiry" src="@/assets/icon_action_help.png" alt="">
+        </div>
+        <div class="score-box">
+          <img class="score-level-img" src="@/assets/Purple.png" alt="">
+          <div class="echarts_box">
+            <div class="echarts">
+              <Score size="120px" />
+              <div>蛋白质</div>
+            </div>
+            <div class="echarts">
+              <Score size="120px" :name="'良好'" :color="'#FFA900'" :value="76.8" />
+              <div>脂肪</div>
+            </div>
+            <div class="echarts">
+              <Score size="120px" :name="'及格'" :color="'#FD6C3B'" :value="10" />
+              <div>碳水化合物</div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="dish_items">
-        <div class="dish_item">
+        <div class="item-left dish_item" v-for="(itemFood, index) in selectedFoods" :key="itemFood.type">
+          <div class="breakfast_top">
+            <img :src="itemFood.icon" alt="">
+            <div>{{itemFood.name}}</div>
+          </div>
           <div class="item-container" ref="box">
-            <div class="draggable-item-horizontal selected-item"  v-for="item in items2">
+            <div class="draggable-item-horizontal selected-item"  v-for="item in itemFood.items">
               <div class="selected-item-content">
                 <img class="selected-item-img" :src="item.img" :alt="item.data">
                 <span>{{item.data}}</span>
               </div>
             </div>
-            <div class="container-selected-item"  :style="{border:isEnter?'1px dashed red':'1px dashed blue'}">
+            <div :class="['container-selected-item',itemFood.items.length > 0 ? '':'no-items']"  :style="{border:isEnter?'2px dashed red':'6px dashed #F0F0F0',position:'relative'}">
               <Container
                 behaviour="contain"
                 group-name="1"
-                :get-child-payload="getChildPayload2"
-                @drop="onDrop('items2', $event,'type1')"
+                :get-child-payload="getChildPayload2(itemFood.type)"
+                @drop="onDrop($event, index)"
                 @drag-enter="onEnter"
                 @drag-leave="onLeave"
                 @drag-end="onEnd"
                 drag-class="card-ghost">
-                <div style="color: #00000000">{{ "1 " }}</div>
+                <div
+                  :style="{
+                           color: itemFood.items.length || isEnter > 0 ? '#00000000' : '#00000038' ,
+                           height:itemFood.items.length > 0 ? '80px':'150px',
+                           lineHeight:itemFood.items.length > 0 ? '80px':'160px',
+                           top:0,left:0,
+                           textAlign:'center',
+                           width:'100%'}">
+                  {{ itemFood.items.length > 0 ? '1':'从右边可拖入菜品' }}
+                </div>
               </Container>
             </div>
           </div>
-
-
-        </div>
-        <div class="dish_item">
-          <Container
-            orientation="horizontal"
-            :drag-begin-delay="0"
-            behaviour="contain"
-            group-name="1"
-            :get-child-payload="getChildPayload1"
-            @drop="onDrop('items3', $event)"
-            drag-class="card-ghost">
-            <Draggable v-for="item in items3">
-              <div class="draggable-item-horizontal">
-                <div class="selected-item-content">
-                  <img class="selected-item-img" :src="item.img" :alt="item.data">
-                  <span>{{item.data}}</span>
-                </div>
-              </div>
-            </Draggable>
-          </Container>
         </div>
       </div>
     </div>
@@ -73,6 +88,7 @@
 
 <script>
   import { Container, Draggable } from 'vue3-smooth-dnd'
+  import Score from '@/components/Echarts/Score.vue'
   const applyDrag = (arr, dragResult) => {
     const { removedIndex, addedIndex, payload } = dragResult
     if (removedIndex === null && addedIndex === null) return arr
@@ -93,12 +109,27 @@
 
   export default {
     name: 'Copy',
-    components: {Container, Draggable},
+    components: {Container, Draggable,Score},
     data () {
       return {
         isEnter: false,
-        items3: [],
-        items2: [],
+        selectedFoods:[{
+          name:'早餐',
+          type:'1',
+          icon:require('@/assets/Dinner_breakfas.png'),
+          items:[],
+        },{
+          name:'中餐',
+          type:'2',
+          icon: require('@/assets/Dinner_lunch.png'),
+          items:[],
+        },{
+          name:'晚餐',
+          type:'3',
+          icon: require('@/assets/Dinner_supper.png'),
+          items:[],
+        }],
+        items2:[],
         items1: [{
           id:1,
           data:'xx_drag_1',
@@ -111,20 +142,17 @@
       }
     },
     methods: {
-      onDrop (collection, dropResult,type) {
+      onDrop (dropResult,index) {
         const { removedIndex, addedIndex, payload } = dropResult
-        if(type == 'type1') {
-          let itemToAdd = payload
-          this[collection].splice(this[collection].length, 0, itemToAdd)
-        }
-        // this[collection] = applyDrag(this[collection], dropResult)
-
+        let itemToAdd = payload
+        if(addedIndex == null && removedIndex == null) return
+        this.selectedFoods[index].items.splice(this.selectedFoods[index].items.length, 0, itemToAdd)
       },
       getChildPayload1 (index) {
         return this.items1[index]
       },
-      getChildPayload2 (index) {
-        return this.items2[index]
+      getChildPayload2 (type) {
+        return  this.selectedFoods[type-1].items
       },
       getChildPayload3 (index) {
         return this.items3[index]
@@ -146,32 +174,41 @@
   }
 </script>
 
-<style>
-.page-content{
-  display: flex;
-
-  height: 100%;
-}
+<style lang="less">
+  *::-webkit-scrollbar {
+    display: none !important;
+  }
+  .dish_items{
+    flex: 1;
+    overflow-y: scroll;
+  }
+  .page-content{
+    display: flex;
+    margin: 0 auto;
+    width: 96%;
+    height: 100%;
+    overflow: hidden;
+  }
   .left-content{
-     flex: 1;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding-top: 15px;
+    margin-right: 26px;
+  }
+  .right-content{
+    width: 342px;
     padding-top: 15px;
-     margin-right: 26px;
-    background-color: #31CA8A22;
-   }
-.right-content{
-  width: 342px;
-  padding-top: 15px;
-  background-color: #55112222;
-}
+  }
   .horizontal{
     width: 100% !important;
     display: flex;
     text-align: left;
   }
-.smooth-dnd-container.horizontal > .smooth-dnd-draggable-wrapper{
-  display: inline-block;
-  margin-left: 20px;
-}
+  .smooth-dnd-container.horizontal > .smooth-dnd-draggable-wrapper{
+    display: inline-block;
+    margin-left: 20px;
+  }
 
   .draggable-item{
     display: inline;
@@ -185,7 +222,8 @@
     width: 57px;
   }
   .item-container{
-    max-width: 712px;
+    height: 175px;
+    max-width: 610px;
     overflow-x: scroll;
     white-space: nowrap; /* 内容超出不换行 */
 
@@ -196,17 +234,22 @@
     border-radius: 10px;
     display: inline-block;
   }
+  .no-items{
+    width: 600px !important;
+    height: 160px !important;
+  }
   .selected-item {
     height: 160px;
     width: 90px;
     display: inline-block;
   }
-.smooth-dnd-disable-touch-action *{
-  touch-action: auto;
-}
+  .smooth-dnd-disable-touch-action *{
+    touch-action: auto;
+  }
   .dish_item{
-
+    margin-top: 24px;
     display: flex;
+    flex-direction: column;
   }
   .selected-item-content{
     display: flex;
@@ -218,4 +261,69 @@
     width: 40px;
     height: 40px;
   }
+  .echarts_box {
+    display: flex;
+    background: #FAFAFC;
+    flex: 1;
+    height: 170px;
+    align-items: center;
+    border-radius: 16px;
+    justify-content: space-around;
+  }
+
+  .echarts {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .score-box{
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+  }
+  .score-level-img{
+    margin: 0 40px;
+    width: 140px;
+    height: 140px;
+  }
+  .score-title-box{
+    display: flex;
+    align-items: center;
+    margin: 0 30px 30px 30px;
+  }
+  .inquiry {
+    width: 2rem;
+    height: 2rem;
+  }
+  .score-title{
+    font-size: 24px;
+    margin-right: 11px;
+    font-weight: 600;
+  }
+  .score-space{
+    width: 32px;
+    height: 1px;
+  }
+  .item-left{
+    background: white;
+    padding: 20px;
+    border-radius: 16px;
+    align-items: start;
+  }
+  .breakfast_top {
+    display: flex;
+    align-items: center;
+    padding: 25px 0;
+    img {
+      width: 3.3rem;
+      height: 3.3rem;
+    }
+
+    div {
+      margin-left: 1.1rem;
+      font-size: 1.8em;
+      font-weight: bold;
+    }
+  }
 </style>