bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/pages_adjust/pages/spotCheck/spotCheck.vue

@@ -1,466 +1,451 @@
<template>

   <view class="tl">

      <V-WorkOrderInfo :orederMessage="info"></V-WorkOrderInfo>

      <div class="tl_title">

         <div class="tl_title_left">

            <div class="tl_title_left_x"></div>

            <span>生产点检</span>

         </div>

         <div class="tl_title_right" @click="add">

            <image src="../../static/gongdan_ic_shoudong@2x.png" class="img24" mode=""></image>

            <!-- <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" /> -->

            <span>增加属性</span>

         </div>

      </div>

      <u-swipe-action>

         <u-swipe-action-item v-for="(item, index) in formList" :key="index" :options="options1"

            @click="dele(index)">

            <div class="tl_list">

               <div class="tl_list_item" @click="open(index)">

                  <div class="tl_list_item_label">生产属性</div>

                  <div class="tl_list_item_go">

                     <span

                        :style="item.attributeName ? 'color: #000;' : ''">{{ item.attributeName ? item.attributeName : '请选择'}}</span>

                     <u-icon name="arrow-right" color="#999999" size="20"></u-icon>

                  </div>

               </div>

               <div class="tl_list_item" v-if="item.type === ''">

                  <div class="tl_list_item_label">属性值</div>

                  <div class="tl_list_item_go">

                     <input type="text" v-model="item.num" placeholder="请输入" />

                  </div>

               </div>

               <div class="tl_list_item" v-else-if="item.type === 0">

                  <div class="tl_list_item_label">属性值</div>

                  <div class="tl_list_item_go">

                     <u-radio-group v-model="item.num" placement="row" @change="radioSelect">

                        <u-radio v-for="(item1, i) in item.data" :key="i" activeColor="#4275FC" :name="item1" :label="item1">

                        </u-radio>

                     </u-radio-group>

                  </div>

               </div>

               <div class="tl_list_item" v-else-if="item.type === 1">

                  <div class="tl_list_item_label">属性值</div>

                  <div class="tl_list_item_go">

                     <u-checkbox-group v-model="item.num" placement="row" >

                        <u-checkbox v-for="(item1, i) in item.data" :key="i" :label="item1" :name="item1">

                        </u-checkbox>

                     </u-checkbox-group>

                  </div>

               </div>

               <div class="tl_list_item" v-else-if="item.type === 2">

                  <div class="tl_list_item_label">属性值</div>

                  <div class="tl_list_item_go">

                     <input type="text" v-model="item.num" :placeholder="item.tips" />

                  </div>

               </div><div class="tl_list_item" v-else-if="item.type === 3">

                  <div class="tl_list_item_label">属性值</div>

<template>
   <view class="tl">
      <V-WorkOrderInfo :orederMessage="info"></V-WorkOrderInfo>
      <div class="tl_title">
         <div class="tl_title_left">
            <div class="tl_title_left_x"></div>
            <span>生产点检</span>
         </div>
         <div class="tl_title_right" @click="add">
            <image src="../../static/gongdan_ic_shoudong@2x.png" class="img24" mode=""></image>
            <!-- <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" /> -->
            <span>增加属性</span>
         </div>
      </div>
      <u-swipe-action>
         <u-swipe-action-item v-for="(item, index) in formList" :key="index" :options="options1"
            @click="dele(index)">
            <div class="tl_list">
               <div class="tl_list_item" @click="open(index)">
                  <div class="tl_list_item_label">生产属性</div>
                  <div class="tl_list_item_go">
                     <u--input v-model="item.num" :placeholder="item.tips"
                         placeholder="请输入内容"
                           type="digit"
                         border="surround"
                       ></u--input>

                     <input   />

                  </div>

               </div>

               <div class="tl_list_item" @click="openTimer(index)" v-else-if="item.type === 4">

                  <div class="tl_list_item_label">属性值</div>

                  <div class="tl_list_item_go">

                     <span :style="item.num ? 'color: #000;' : ''">{{item.num ? item.num : item.tips}}</span>

                     <u-icon name="arrow-right" color="#999999" size="20"></u-icon>

                  </div>

               </div>

            </div>

         </u-swipe-action-item>

      </u-swipe-action>

      <!-- <van-swipe-cell v-for="(item, index) in formList" :key="index">

         <div class="tl_list">

            <div class="tl_list_item" @click="open(index)">

               <div class="tl_list_item_label">生产属性</div>

               <div class="tl_list_item_go">

                  <span

                     :style="item.attributeName ? 'color: #000;' : ''">{{ item.attributeName ? item.attributeName : '请选择'}}</span>

                  <van-icon name="arrow" color="#999999" />

               </div>

            </div>

            <div class="tl_list_item" v-if="item.type === ''">

               <div class="tl_list_item_label">属性值</div>

               <div class="tl_list_item_go">

                  <input type="text" v-model="item.num" placeholder="请输入" />

               </div>

            </div>

            <div class="tl_list_item" v-else-if="item.type === 0">

               <div class="tl_list_item_label">属性值</div>

               <div class="tl_list_item_go">

                  <u-radio-group v-model="item.num" placement="row">

                     <u-radio v-for="(item1, i) in item.data" :key="i" activeColor="#4275FC" :label="item1">

                     </u-radio>

                  </u-radio-group>

               </div>

            </div>

            <div class="tl_list_item" v-else-if="item.type === 1">

               <div class="tl_list_item_label">属性值</div>

               <div class="tl_list_item_go">

                  <u-checkbox-group v-model="item.num" placement="row">

                     <u-checkbox v-for="(item1, i) in item.data" :key="i" :label="item1" :name="item1">

                     </u-checkbox>

                  </u-checkbox-group>

               </div>

            </div>

            <div class="tl_list_item" v-else-if="item.type === 2">

               <div class="tl_list_item_label">属性值</div>

               <div class="tl_list_item_go">

                  <input type="text" v-model="item.num" :placeholder="item.tips" />

               </div>

            </div>

            <div class="tl_list_item" v-else-if="item.type === 3">

               <div class="tl_list_item_label">属性值</div>

               <div class="tl_list_item_go">

                  <input type="text" v-model="item.num" :placeholder="item.tips" />

               </div>

            </div>

            <div class="tl_list_item" @click="openTimer(index)" v-else-if="item.type === 4">

               <div class="tl_list_item_label">属性值</div>

               <div class="tl_list_item_go">

                  <span :style="item.num ? 'color: #000;' : ''">{{item.num ? item.num : item.tips}}</span>

                  <u-icon name="arrow" color="#999999" />

               </div>

            </div>

         </div>

         <template #right>

            <van-button square style="height: 100%;" type="danger" text="删除" @click="dele(index)" />

         </template>

      </van-swipe-cell> -->



      <div class="tl_zw"></div>

      <div class="tl_footer">

         <button class="tl_footer_submit" v-preventReClick @click="submit">提交</button>

      </div>

      <u-picker :show="show" :columns="[gzqjData]" title="选择生产属性" @confirm="gzqjConfirm" @cancel="show=false">

      </u-picker>

   </view>

</template>



<script>

   import VWorkOrderInfo from '@/components/workOrderInfo.vue'

   import {

      setTimeO

   } from '@/util/utils.js'

   import {

      queryById,

      getJdList,

      createDJ

   } from '@/util/api/WorkOrderAPI'

   export default {

      components: {

         VWorkOrderInfo

      },

      data() {

         return {

            options1: [{

               text: '删除'

            }],

            show: false,

            index: '',

            workOrderId: '',

            info: {},

            gzqjData: [],

            formList: [{

               id: Date.now(),

               attribute: '', // 属性值

               attributeName: '', // 属性值名称

               data: '', // 数据

               type: '', // 类型

               tips: '', // 提示子

               num: '' // 数量

            }]

         }

      },

      onLoad(obj) {

         this.workOrderId = obj.id

         this.queryByIds()

         this.getJdLists()

      },

      methods: {

         queryByIds() {

            queryById(this.workOrderId)

               .then(res => {

                  console.log(res);

                  this.info = res.data

               })

         },

         getJdLists() {

            getJdList({

                  workOrderID: this.workOrderId

               })

               .then(res => {

                  if (res.code === 200 && res.data && res.data.length !== 0) {

                     res.data.forEach(item => {

                        this.gzqjData.push({

                           text: item.name,

                           id: item.id,

                           type: item.type,

                           data: item.remark ? item.remark.split(' ') : '',

                           tips: item.tips

                        })

                     })

                  }

               })

         },

         add() {

            this.formList.push({

               id: Date.now(),

               attribute: '',

               attributeName: '',

               num: '',

               type: '',

               data: '',

               tips: ''

            })

         },

         open(index) {

            this.index = index

            this.show = true

         },

         gzqjConfirm({

            value

         }) {

            console.log(value);

            let temp = value[0]

            this.formList[this.index] = {

               attribute: temp.id,

               attributeName: temp.text,

               type: temp.type,

               data: temp.data,

               tips: temp.tips,

               num: '',

            }

            if (temp.type === 1) {

               this.formList[this.index].num = []

            } else if (temp.type === 0) {

               this.formList[this.index].num = temp.data[0]

            } else if (temp.type === 4) {

               this.formList[this.index].num = setTimeO(new Date(), '-')

            }

            // this.formList.forEach((item, index) => {

            //         if (this.index === index) {

            //             item.attribute = value.id

            //             item.attributeName = value.text

            //             item.type = value.type

            //             item.data = value.data

            //             item.tips = value.tips

            //             console.log(value)

            //             item.num = ''

            // if (item.type === 1) {

            //     item.num = []

            // } else if (item.type === 0) {

            //     item.num = item.data[0]

            // }

            // if (value.type === 4) {

            //     formList.value[indexs.value].num = setTimeO(new Date(), '-')

            // }

            //         }

            //     })

            this.show = false

         },

         dele(index) {

            if (this.formList.length === 1) {

               uni.$u.toast('至少保留一条点检信息')

               return

            }

            this.formList.splice(index, 1)

                     <span
                        :style="item.attributeName ? 'color: #000;' : ''">{{ item.attributeName ? item.attributeName : '请选择'}}</span>
                     <van-icon name="arrow" color="#999999" />
                  </div>
               </div>
               <div class="tl_list_item" v-if="item.type === ''">
                  <div class="tl_list_item_label">属性值</div>
                  <div class="tl_list_item_go">
                     <input type="text" v-model="item.num" placeholder="请输入" />
                  </div>
               </div>
               <div class="tl_list_item" v-else-if="item.type === 0">
                  <div class="tl_list_item_label">属性值</div>
                  <div class="tl_list_item_go">
                     <u-radio-group v-model="item.num" placement="row" @change="radioSelect">
                        <u-radio v-for="(item1, i) in item.data" :key="i" activeColor="#4275FC" :name="item1" :label="item1">
                        </u-radio>
                     </u-radio-group>
                     <!-- <van-radio-group v-model="item.num" direction="horizontal">
                        <van-radio :name="item1" checked-color="#4275FC" v-for="(item1, i) in item.data" :key="i">
                           {{item1}}
                        </van-radio>
                     </van-radio-group> -->
                  </div>
               </div>
               <div class="tl_list_item" v-else-if="item.type === 1">
                  <div class="tl_list_item_label">属性值</div>
                  <div class="tl_list_item_go">
                     <u-checkbox-group v-model="item.num" placement="row">
                        <u-checkbox v-for="(item1, i) in item.data" :key="i" :label="item1" :name="item1">
                        </u-checkbox>
                     </u-checkbox-group>
                  </div>
               </div>
               <div class="tl_list_item" v-else-if="item.type === 2 || item.type === 3">
                  <div class="tl_list_item_label">属性值</div>
                  <div class="tl_list_item_go">
                     <input type="text" v-model="item.num" :placeholder="item.tips" />
                  </div>
               </div>
               <div class="tl_list_item" @click="openTimer(index)" v-else-if="item.type === 4">
                  <div class="tl_list_item_label">属性值</div>
                  <div class="tl_list_item_go">
                     <span :style="item.num ? 'color: #000;' : ''">{{item.num ? item.num : item.tips}}</span>
                     <u-icon name="arrow" color="#999999" />
                  </div>
               </div>
            </div>
         </u-swipe-action-item>
      </u-swipe-action>
      <!-- <van-swipe-cell v-for="(item, index) in formList" :key="index">
         <div class="tl_list">
            <div class="tl_list_item" @click="open(index)">
               <div class="tl_list_item_label">生产属性</div>
               <div class="tl_list_item_go">
                  <span
                     :style="item.attributeName ? 'color: #000;' : ''">{{ item.attributeName ? item.attributeName : '请选择'}}</span>
                  <van-icon name="arrow" color="#999999" />
               </div>
            </div>
            <div class="tl_list_item" v-if="item.type === ''">
               <div class="tl_list_item_label">属性值</div>
               <div class="tl_list_item_go">
                  <input type="text" v-model="item.num" placeholder="请输入" />
               </div>
            </div>
            <div class="tl_list_item" v-else-if="item.type === 0">
               <div class="tl_list_item_label">属性值</div>
               <div class="tl_list_item_go">
                  <u-radio-group v-model="item.num" placement="row">
                     <u-radio v-for="(item1, i) in item.data" :key="i" activeColor="#4275FC" :label="item1">
                     </u-radio>
                  </u-radio-group>
               </div>
            </div>
            <div class="tl_list_item" v-else-if="item.type === 1">
               <div class="tl_list_item_label">属性值</div>
               <div class="tl_list_item_go">
                  <u-checkbox-group v-model="item.num" placement="row">
                     <u-checkbox v-for="(item1, i) in item.data" :key="i" :label="item1" :name="item1">
                     </u-checkbox>
                  </u-checkbox-group>
               </div>
            </div>
            <div class="tl_list_item" v-else-if="item.type === 2">
               <div class="tl_list_item_label">属性值</div>
               <div class="tl_list_item_go">
                  <input type="text" v-model="item.num" :placeholder="item.tips" />
               </div>
            </div>
            <div class="tl_list_item" v-else-if="item.type === 3">
               <div class="tl_list_item_label">属性值</div>
               <div class="tl_list_item_go">
                  <input type="text" v-model="item.num" :placeholder="item.tips" />
               </div>
            </div>
            <div class="tl_list_item" @click="openTimer(index)" v-else-if="item.type === 4">
               <div class="tl_list_item_label">属性值</div>
               <div class="tl_list_item_go">
                  <span :style="item.num ? 'color: #000;' : ''">{{item.num ? item.num : item.tips}}</span>
                  <u-icon name="arrow" color="#999999" />
               </div>
            </div>
         </div>
         <template #right>
            <van-button square style="height: 100%;" type="danger" text="删除" @click="dele(index)" />
         </template>
      </van-swipe-cell> -->

      <div class="tl_zw"></div>
      <div class="tl_footer">
         <button class="tl_footer_submit" v-preventReClick @click="submit">提交</button>
      </div>
      <u-picker :show="show" :columns="[gzqjData]" title="选择生产属性" @confirm="gzqjConfirm" @cancel="show=false">
      </u-picker>
   </view>
</template>

<script>
   import VWorkOrderInfo from '@/components/workOrderInfo.vue'
   import {
      setTimeO
   } from '@/util/utils.js'
   import {
      queryById,
      getJdList,
      createDJ
   } from '@/util/api/WorkOrderAPI'
   export default {
      components: {
         VWorkOrderInfo
      },
      data() {
         return {
            options1: [{
               text: '删除'
            }],
            show: false,
            index: '',
            workOrderId: '',
            info: {},
            gzqjData: [],
            formList: [{
               id: Date.now(),
               attribute: '', // 属性值
               attributeName: '', // 属性值名称
               data: '', // 数据
               type: '', // 类型
               tips: '', // 提示子
               num: '' // 数量
            }]
         }
      },
      onLoad(obj) {
         this.workOrderId = obj.id
         this.queryByIds()
         this.getJdLists()
      },
      methods: {
         queryByIds() {
            queryById(this.workOrderId)
               .then(res => {
                  console.log(res);
                  this.info = res.data
               })
         },
         getJdLists() {
            getJdList({
                  workOrderID: this.workOrderId
               })
               .then(res => {
                  if (res.code === 200 && res.data && res.data.length !== 0) {
                     res.data.forEach(item => {
                        this.gzqjData.push({
                           text: item.name,
                           id: item.id,
                           type: item.type,
                           data: item.remark ? item.remark.split(' ') : '',
                           tips: item.tips
                        })
                     })
                  }
               })
         },
         add() {
            this.formList.push({
               id: Date.now(),
               attribute: '',
               attributeName: '',
               num: '',
               type: '',
               data: '',
               tips: ''
            })
         },
         open(index) {
            this.index = index
            this.show = true
         },
         gzqjConfirm({
            value
         }) {
            console.log(value);
            let temp = value[0]
            this.formList[this.index] = {
               attribute: temp.id,
               attributeName: temp.text,
               type: temp.type,
               data: temp.data,
               tips: temp.tips,
               num: '',
            }
            if (temp.type === 1) {
               this.formList[this.index].num = []
            } else if (temp.type === 0) {
               this.formList[this.index].num = temp.data[0]
            } else if (temp.type === 4) {
               this.formList[this.index].num = setTimeO(new Date(), '-')
            }
            // this.formList.forEach((item, index) => {
            //         if (this.index === index) {
            //             item.attribute = value.id
            //             item.attributeName = value.text
            //             item.type = value.type
            //             item.data = value.data
            //             item.tips = value.tips
            //             console.log(value)
            //             item.num = ''
            // if (item.type === 1) {
            //     item.num = []
            // } else if (item.type === 0) {
            //     item.num = item.data[0]
            // }
            // if (value.type === 4) {
            //     formList.value[indexs.value].num = setTimeO(new Date(), '-')
            // }
            //         }
            //     })
            this.show = false
         },
         dele(index) {
            if (this.formList.length === 1) {
               uni.$u.toast('至少保留一条点检信息')
               return
            }
            this.formList.splice(index, 1)
         },
         radioSelect(v) {
            console.log(v);
         },

         submit() {

         },
         submit() {
            let isOpen = true
            let attrList = []
				
				
            this.formList.forEach(item => {
               console.log('-------', item);

               console.log('-------', item);
               if (item.type === 1) {
                  if (item.attribute === '' || item.num.length === 0) {

                  if (item.attribute === '' || item.num.length === 0) {
                     isOpen = false
                     return

                     return
                  } else {
                     attrList.push({
                        val: item.num.join(' '),
                        attrId: item.attribute
                     })
                  }

                  }
               } else {
                  if (item.attribute === '' || item.num === '') {

                  if (item.attribute === '' || item.num === '') {
                     isOpen = false
                     return

                     return
                  } else {
                     attrList.push({
                        val: item.num,
                        attrId: item.attribute
                     })
                  }

               }

            })

            if (!isOpen) {

               uni.$u.toast('请将信息填写完整')

               return

            }

				
            createDJ({

               attrList: attrList,

               id: this.workOrderId

            }).then(res => {

                  }
               }
            })
            if (!isOpen) {
               uni.$u.toast('请将信息填写完整')
               return
            }
				
            createDJ({
               attrList: attrList,
               id: this.workOrderId
            }).then(res => {
               if (res.code === 200) {
                  uni.$emit('spotAdd')
                  uni.$u.toast('创建成功')

                  setTimeout(() => {

                     uni.navigateBack()

                  }, 1000)

               }

            })

         }

      }

   }

</script>



<style lang="scss" scoped>

   .tl {

      width: 100%;

      height: 100%;

      position: absolute;

      background: #F7F7F7;



      .tl_title {

         display: flex;

         align-items: center;

         justify-content: space-between;

         padding: 30rpx;



         .tl_title_left {

            display: flex;

            align-items: center;



            .tl_title_left_x {

               width: 8rpx;

               height: 30rpx;

               background: $nav-color;

               border-radius: 2rpx;

               margin-right: 12rpx;

            }



            span {

               font-size: 32rpx;

               font-weight: 500;

               color: #222222;

            }

         }



         .tl_title_right {

            display: flex;

            align-items: center;



            img {

               width: 28rpx;

               height: 28rpx;

               margin-right: 12rpx;

            }



            span {

               font-size: 28rpx;

               font-weight: 400;

               color: $nav-color;

            }

         }

      }



      .tl_list {

         display: flex;

         flex-direction: column;

         background: white;

         padding: 0 30rpx;

         margin-bottom: 20rpx;



         .tl_list_item {

            min-height: 98rpx;

            display: flex;

            align-items: center;

            justify-content: space-between;

            border-bottom: 1rpx solid #E5E5E5;



            &:last-child {

               border: none;

            }



            .tl_list_item_label {

               font-size: 30rpx;

                  uni.$u.toast('创建成功')
                  setTimeout(() => {
                     uni.navigateBack()
                  }, 1000)
               }
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .tl {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #F7F7F7;

      .tl_title {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 30rpx;

         .tl_title_left {
            display: flex;
            align-items: center;

            .tl_title_left_x {
               width: 8rpx;
               height: 30rpx;
               background: $nav-color;
               border-radius: 2rpx;
               margin-right: 12rpx;
            }

            span {
               font-size: 32rpx;
               font-weight: 500;
               color: #222222;
            }
         }

         .tl_title_right {
            display: flex;
            align-items: center;

            img {
               width: 28rpx;
               height: 28rpx;
               margin-right: 12rpx;
            }

            span {
               font-size: 28rpx;
               font-weight: 400;
               flex-shrink: 1;

               color: #222222;

            }



            .tl_list_item_go {

               display: flex;

               align-items: center;

               flex: 1;
               justify-content: flex-end;

               input {

                  text-align: right;

                  width: 450rpx;

                  height: 60rpx;

                  border-radius: 8rpx;

                  border: 1rpx solid #E5E5E5;

                  padding: 0 30rpx;

                  box-sizing: border-box;

                  font-size: 28rpx;

                  font-weight: 400;

                  color: #333333;

               }



               span {

                  font-size: 28rpx;

                  font-weight: 400;

                  color: #999999;

                  margin-right: 10rpx;

               }

            }

         }

      }



      .tl_zw {

         height: 160rpx;

      }



      .tl_footer {

         width: 100%;

         position: fixed;

         bottom: 0;

         left: 0;

         padding: 0 30rpx 68rpx 30rpx;

         box-sizing: border-box;



         .tl_footer_submit {

            width: 690rpx;

            height: 88rpx;

            border: none;

            background: #4275FC;

            box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);

            border-radius: 8rpx;

            font-size: 30rpx;

            font-weight: 500;

            color: #FFFFFF;

            display: flex;

            align-items: center;

            justify-content: center;

         }

      }

               color: $nav-color;
            }
         }
      }

      .tl_list {
         display: flex;
         flex-direction: column;
         background: white;
         padding: 0 30rpx;
         margin-bottom: 20rpx;

         .tl_list_item {
            min-height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #E5E5E5;

            &:last-child {
               border: none;
            }

            .tl_list_item_label {
               font-size: 30rpx;
               font-weight: 400;
               color: #222222;
            }

            .tl_list_item_go {
               display: flex;
               align-items: center;

               input {
                  text-align: right;
                  width: 450rpx;
                  height: 60rpx;
                  border-radius: 8rpx;
                  border: 1rpx solid #E5E5E5;
                  padding: 0 30rpx;
                  box-sizing: border-box;
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #333333;
               }

               span {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #999999;
                  margin-right: 10rpx;
               }
            }
         }
      }

      .tl_zw {
         height: 160rpx;
      }

      .tl_footer {
         width: 100%;
         position: fixed;
         bottom: 0;
         left: 0;
         padding: 0 30rpx 68rpx 30rpx;
         box-sizing: border-box;

         .tl_footer_submit {
            width: 690rpx;
            height: 88rpx;
            border: none;
            background: #4275FC;
            box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);
            border-radius: 8rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      }
   }
   /deep/ .u-checkbox-group {
      flex-wrap: wrap;
      max-width: 100%;
   }
   /deep/ .u-radio-group {
      flex-wrap: wrap;
      max-width: 100%;
   }

</style>