Question

我制作了一个显示BTC价格的程序，我打算用它来制作镀铬扩展程序。但遗憾的是，我用PHP编写了它。谷歌扩展不支持。

我在Codepen.io上查了一个脚本，看看它是否能正常工作，我找到了这个 - https://codepen.io/magnificode/pen/KyMMOB?q=bitcoin+price+&limit=all&type=type-pens

JS档案 - ＆gt;

  const app = new Vue({
        el: '.btc-badge',
        data: {
            btcUSD: '0.00',
            upDown: 'up',
        },
        mounted() {
            this.getInfo();

            setInterval(()=> {
                this.getInfo();
            }, 1000*60);
        },
        methods: {
            getInfo() {
              axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                .then(response => {
                  const oldPrice = this.btcUSD
                  const newPrice = parseFloat(response.data.bpi.USD.rate_float).toFixed(2)
                  if (newPrice > oldPrice) {
                      this.upDown = 'up'
                  } else {
                      this.upDown = 'down'
                  }
                  this.btcUSD = newPrice
              });
            }
        },
    });

CSS文件 - ＆gt;

body,html {
        height: 100%;
    }

    body {
        -webkit-font-smoothing: antialiased;
        background-image: linear-gradient(to right, #ece9e6, #ccc);
        font-smoothing: antialiased;
        align-items: center;
        color: #fafafa;
        display: flex;
        font-family: "macha";
        height: 100%;
        justify-content: center;
    }

    .card {
        align-items: center;
        background-image: linear-gradient(to top right, #141e30, #243b55);
        border-radius: .4em;
        box-shadow: 0 0 66px rgba(#000, 0.3);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        overflow: hidden;
        padding: 1em;
        position: relative;
        width: 250px;
        height: 300px;
        z-index: 0;

    &:after {
        mix-blend-mode: overlay;
        border: 1px solid #eee;
        border-radius: .4em;
        content: '';
        height: calc(100% - 2em);
        left: 0;
        margin: 1em;
        position: absolute;
        top: 0;
        width: calc(100% - 2em);
        z-index: 1;
    }
}

h1 {
    letter-spacing: 0.05em;
    margin: 0;
}

p {
    margin: 0;
}

.up {
    color: #42ffa8;
}

.down {
    color: #ff0740;

    &:after {
        transform: rotate(180deg);
    }
}

.up,
.down {
    align-items: center;
    display: flex;
    &:after{
        border-style: solid;
        border-width: 0 5px 5px 5px;
        border-color: transparent transparent currentColor transparent;
        content: "";
        height: 0;
        margin-left: .5em;
        margin-top: .1em;
        width: 0;
    }
}

svg {
    bottom: -50%;
    fill: #999;
    left: -20%;
    mix-blend-mode: overlay;
    position: absolute;
    transform: scaleX(-1);
    width: 150%;
    z-index: -1;
}
and the html file ->

尝试{Typekit.load（{async：true}）;} catch（e）{}

<div class="btc-badge">
    <div class="card">
        <p>Current Bitcoin price</p>
        <h1>${{ btcUSD }}</h1>
        <p :class="upDown">{{upDown}}</p>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 30L30 40 10 10v80h80V50L70 60"/></svg>
    </div>
</doesnt took the code and put it in a folder, uploaded it and i pressed the little icon for my app. but now i saw that the prices doesn't show up.

你们有没有人知道为什么会这样？谢谢 - 乔纳斯。

价格不会出现

0 个答案: