import { defineComponent } from "vue";
import styles from "./index.module.less";
import P404 from '/src/assets/404_images/404.png'
import PCloud from '/src/assets/404_images/404_cloud.png'

export default defineComponent({
  name: 'Page404',
  data() {
    return {
      message: "很抱歉，你访问的页面不存在"
    };
  },
  render() {
    return (
      <div class={styles.wscnHttp404Container}>
        <div class={styles.wscnHttp404}>
        <div class={styles.pic404}>
            <img class={styles.pic404__parent}
                src={P404}
                alt="404" />
            <img class={[styles.pic404__child, styles.left]}
                src={PCloud}
                alt="404" />
            <img class={[styles.pic404__child, styles.mid]}
                src={PCloud}
                alt="404" />
            <img class={[styles.pic404__child, styles.right]}
                src={PCloud}
                alt="404" />
          </div>
          <div class={styles.bullshit}>
            <div class={styles.bullshit__oops}>OOPS!</div>
            <div class={styles.bullshit__headline}>{ this.message }</div>
            <div class={styles.bullshit__info}>请检查您输入的网址是否正确，或者点击链接继续浏览</div>
            <a href=""
              class={styles.bullshit__returnHome}>返回首页</a>
          </div>
        </div>
      </div>
    );
  }
})
