colexiu-project/src/components/silder/index.tsx

import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import classes from './index.module.less'
import { ElButton, ElIcon, ElPopover } from 'element-plus'
import { scrollAnimation } from '@/util/scroll'
import silder1 from './images/silder1.png'
import silder2 from './images/silder2.svg'
import silder3 from './images/silder3.png'
import silder4 from './images/silder4.svg'
import silder5 from './images/silder5.svg'
import download from './images/download.png'
import siderTop from './images/siderTop.png'
import weixin from '@/common/images/weixinCode.jpg'
import studentCode from '@/common/images/studentCode.png'
import teacherCode from '@/common/images/teacherCode.png'

import andIcon from '@/views/downLoad/images/andIcon.png'
import ios from '@/views/downLoad/images/iosIcon.png'
export default defineComponent({
  name: 'silder',
  setup() {
    const state = reactive({
      showgo: false,
      hoverApp: false,
      hoverChat: false,
      hoverTop: false
    })
    const gotop = () => {
      const currentY =
        document.documentElement.scrollTop || document.body.scrollTop
      scrollAnimation(currentY, 0)
    }
    onMounted(() => {
      window.onscroll = function () {
        if (document.documentElement.scrollTop > 300) {
          state.showgo = true
        } else {
          state.showgo = false
        }
      }
    })
    return () => (
      <>
        <div class={classes.silderWrap}>
          <div class={classes.silderList}>
            {/* <ElPopover
              placement="left"
              trigger="hover"
              popper-class="Mopopver"
              v-slots={{
                reference: () => (
                  <div class={classes.silderItem}>
                    <img src={silder2}  />
                    <p>电话咨询</p>
                    <div class={classes.line}></div>
                  </div>
                )
              }}
            >
              <div>
                <p class={classes.hoverTitle}>咨询电话：</p>
                <p class={classes.hoverMsg}>400-8851569</p>
              </div>
            </ElPopover> */}
            <ElPopover
            width='230px'
              placement="left"
              trigger="hover"
              popper-class="silderPopver"
              v-slots={{
                reference: () => (
                  <div class={classes.silderItem}   onMouseover={() => {
                    state.hoverApp = true
                  }}
                  onMouseout={() => {
                    state.hoverApp = false
                  }}>
                    {state.hoverApp ? <img src={silder3} />:  <p>APP下载</p>}

                    <div class={classes.line}></div>
                  </div>
                )
              }}
            >
              <div>
                <div class="codeItem">
                  <img  class="codeImg" src={studentCode} width="111" height="111" />
                  <p style={{ 'text-align': 'center' }}>酷乐秀</p>
                  <div class='iconWrap'>
                  <div
                    class='iconItem'

                  >
                    <img src={ios} alt="" />
                    <span>ios</span>
                  </div>
                  <div class='iconItem'>
                    <img src={andIcon} alt="" />
                    <span>Andrid</span>
                  </div>
                </div>
                </div>
                <div class="codeItem">
                  <img class="codeImg" src={teacherCode} width="111" height="111" />
                  <p style={{ 'text-align': 'center' }}>酷乐秀学院</p>
                  <div class='iconWrap'>
                  <div
                  class='iconItem'

                  >
                    <img src={ios} alt="" />
                    <span>ios</span>
                  </div>
                  <div class='iconItem'>
                    <img src={andIcon} alt="" />
                    <span>Andrid</span>
                  </div>
                </div>
                </div>
              </div>
            </ElPopover>
            <ElPopover
              placement="left"
              width='230px'
              trigger="hover"
              popper-class="silderPopver"
              v-slots={{
                reference: () => (
                  <div
                    class={classes.silderItem}
                    onMouseover={() => {
                      state.hoverChat = true
                    }}
                    onMouseout={() => {
                      state.hoverChat = false
                    }}
                  >
                    {state.hoverChat ? <img src={silder1} /> : <p>关注微信</p>}

                    <div class={classes.line}></div>
                    {/* <div class={classes.wall}></div> */}
                  </div>
                )
              }}
            >
              <div>
                <div class="codeItem">
                  <img class="codeImg" src={weixin} width="111" height="111" />
                  <p style={{ 'text-align': 'center' }}>打开微信扫一扫 <br />关注酷乐秀公众号</p>
                </div>
              </div>
            </ElPopover>
            {/* {state.showgo ? ( */}
            <div class={classes.goTop} onClick={gotop}>
              <img src={siderTop} />
              {/* 回到顶部 */}
            </div>
            {/* ) : (
            ''
          )} */}
          </div>
        </div>
      </>
    )
  }
})