<template>
    <div style="position: absolute; bottom: 0;width: 100%; display: flex;justify-content: center;padding: 0 0 10px 0 ;"
        :style="{'background-image':upIcon?'linear-gradient(-180deg,rgba(255,255,255,0) 70%,#fff 70%)':'linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%)',
        }">
        <span style="width: 100px;color: red;cursor: pointer;" @click="viewMore">
            <span style="display: flex;align-items: center;" v-if="!upIcon">{{$t('fnc.zhankai')}} <span style="margin-top: 5px;"> ﹀</span></span>
            <span style="display: flex;align-items: center;" v-else>{{$t('fnc.shouqi')}} <span style="margin-bottom: 5px;"> ︿</span></span>
        </span>
    </div>
  </template>

  <script>
  export default {
    props: ["upIcon"],
    components: {},
    data() {
      return {

      }
    },
    watch: {
        upIcon: {
            handler(newValue,onldValue) {
                this.upIcon = newValue
            },
            deep:true,
            immediate: true
        },
    },
    mounted() {

    },
    methods: {
        viewMore() {
            this.$emit('change')
        },
    }
  }
  </script>

  <style scoped>

  </style>
